/* Patricio · landing. Florencia meets tech: mármol de Carrara, líneas de
   pietra serena como en los interiores de Brunelleschi, terracota de la
   cúpula para la acción y verde de Prato en los detalles. Titulares en
   Bodoni Moda; el texto, en Hanken Grotesk como la app. */
:root {
  --marble: oklch(0.975 0.006 85);
  --panel: oklch(0.992 0.003 85);
  --vein: oklch(0.945 0.009 80);
  --ink: oklch(0.23 0.012 60);
  --ink-soft: oklch(0.46 0.014 215);
  --serena: oklch(0.60 0.018 215);
  --rule: oklch(0.84 0.010 215);
  --rule-soft: oklch(0.91 0.007 215);
  --terracotta: oklch(0.52 0.125 38);
  --terracotta-deep: oklch(0.45 0.115 36);
  --verde: oklch(0.42 0.055 170);
  --red: oklch(0.50 0.17 27);
  --radius: 4px;
  --max: 1180px;
  --display: "Bodoni Moda", "Bodoni 72", Didot, serif;
  --font: "Hanken Grotesk", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--marble);
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(var(--max), 100% - 48px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Titulares en Bodoni: contraste alto, como una inscripción */
h1, .section-title, .feature h3, .plan .price, .story .quote {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Navegación */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in oklab, var(--marble) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 600 23px/1 var(--display); text-decoration: none; }
.wordmark img { width: 28px; height: 28px; }
.nav nav { display: flex; gap: 22px; margin-left: 12px; }
.nav nav a { color: var(--ink-soft); font-size: 15px; text-decoration: none; }
.nav nav a:hover { color: var(--ink); }
.nav .spacer { flex: 1; }
.lang { color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.lang:hover { color: var(--ink); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 8px 18px; border: 1px solid var(--terracotta); border-radius: var(--radius); background: var(--terracotta); color: var(--panel); font: 600 15px var(--font); text-decoration: none; cursor: pointer; transition: background-color 160ms ease-out, border-color 160ms ease-out; }
.button:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--serena); }
.button.ghost:hover { background: var(--panel); border-color: var(--ink); }

/* Hero: el texto y, al lado, la P de Pacioli */
.hero { padding: 72px 0 24px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: center; }
.eyebrow { margin: 0 0 20px; color: var(--verde); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1 { max-width: 14ch; margin: 0; font-size: clamp(44px, 6.4vw, 86px); line-height: 0.98; }
.hero h1 em { color: var(--terracotta); }
.hero .lede { max-width: 54ch; margin: 28px 0 0; color: var(--ink-soft); font-size: 19px; line-height: 1.55; }
.hero .lede strong { color: var(--ink); font-weight: 600; }
.plate { position: relative; margin: 0; isolation: isolate; }
.plate img { position: relative; z-index: 1; width: 100%; mix-blend-mode: multiply; mask-image: radial-gradient(ellipse 70% 66% at 50% 46%, #000 62%, transparent 100%); }
.plate figcaption { position: relative; z-index: 1; }
.plate figcaption { margin-top: 20px; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.plate figcaption i { color: var(--ink); }

.waitlist { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin-top: 36px; }
.waitlist input { flex: 1 1 240px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--serena); border-radius: var(--radius); background: var(--panel); color: var(--ink); font: 400 16px var(--font); }
.waitlist input:focus { outline: 2px solid color-mix(in oklab, var(--terracotta) 45%, white); outline-offset: 1px; border-color: var(--terracotta); }
.waitlist .button { min-height: 48px; padding-inline: 22px; }
.waitlist-note { width: 100%; margin: 4px 0 0; color: var(--ink-soft); font-size: 14px; }
.waitlist-note[data-state="ok"] { color: var(--verde); font-weight: 600; }
.waitlist-note[data-state="error"] { color: var(--red); }

/* Capturas: marco doble, como las molduras de pietra serena */
.shot { margin: 64px 0 0; padding: 10px; border: 1px solid var(--serena); background: var(--panel); box-shadow: 0 48px 90px -48px oklch(0.3 0.02 60 / 0.45); transform-origin: 50% 100%; transform: perspective(1800px) rotateX(calc(clamp(0, var(--p, 0), 1) * 18deg)) translate3d(0, calc(clamp(0, var(--p, 0), 1) * 40px), 0); }
.shot img { border: 1px solid var(--rule-soft); }
.shot figcaption { padding: 12px 4px 2px; color: var(--ink-soft); font-size: 13px; }

/* Secciones */
section { padding: 104px 0; }
section + section { border-top: 1px solid var(--rule); }
.numeral { display: block; margin: 0 0 18px; color: var(--terracotta); font: 500 15px/1 var(--display); letter-spacing: 0.2em; }
.section-title { max-width: 20ch; margin: 0; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04; }
.section-lede { max-width: 62ch; margin: 22px 0 0; color: var(--ink-soft); font-size: 19px; }

/* Historia: de los libros de Florencia al agente */
.story { background: var(--vein); }
.story .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.story figure { margin: 0; }

.story figcaption { margin-top: 14px; color: var(--ink-soft); font-size: 13px; }
.story figcaption i { color: var(--ink); }
.story .quote { max-width: 20ch; margin: 0; color: var(--ink); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; }
.story p { max-width: 56ch; margin: 24px 0 0; color: var(--ink-soft); font-size: 18px; }
.story .dates { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 44px; margin: 36px 0 0; padding: 18px 0 0; border-top: 1px solid var(--serena); }
.story .dates div { display: grid; gap: 4px; }
.story .dates b { font: 500 32px/1 var(--display); }
.story .dates span { color: var(--ink-soft); font-size: 14px; }

.feature { padding: 96px 0 0; }
.feature h3 { max-width: 22ch; margin: 0; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.08; }
.feature .shot { margin-top: 32px; }

/* Privacidad */

/* Tres generaciones: el refrán en varias lenguas y lo que viene */
.proverbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 48px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.proverbs li { display: grid; gap: 6px; align-content: start; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--rule); }
.proverbs li:not(:nth-child(3n + 1)) { padding-left: 24px; border-left: 1px solid var(--rule); }
.proverbs span { font: italic 500 clamp(19px, 1.8vw, 24px)/1.25 var(--display); }
.proverbs span:lang(zh), .proverbs span:lang(ja) { font-style: normal; font-family: "Hiragino Mincho ProN", "Songti SC", "Noto Serif CJK JP", serif; }
.proverbs small { color: var(--ink-soft); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.generations-text { max-width: 68ch; margin-top: 40px; }
.generations-text p { margin: 0 0 16px; color: var(--ink-soft); font-size: 18px; }
.generations-text strong { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .proverbs { grid-template-columns: minmax(0, 1fr); }
  .proverbs li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
}

/* Planes: un solo bloque dividido, como un libro mayor */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 56px 0 0; border: 1px solid var(--serena); background: var(--panel); }
.plan { display: flex; flex-direction: column; padding: 32px; }
.plan + .plan { border-left: 1px solid var(--rule); }
.plan.pro { background: var(--marble); box-shadow: inset 0 3px 0 var(--terracotta); }
.plan h3 { margin: 0; font: 500 30px/1.1 var(--display); }
.plan h3 .soon { font-family: var(--font); line-height: 1.4; vertical-align: 6px; }
.plan .price { margin: 14px 0 0; font-size: 52px; line-height: 1; }
.plan .price small { color: var(--ink-soft); font: 400 16px var(--font); }
.plan .alt { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
.plan p { margin: 10px 0 0; color: var(--ink-soft); font-size: 16px; }
.plan ul { flex: 1; margin: 24px 0; padding: 0; list-style: none; display: grid; gap: 10px; align-content: start; }
.plan li { position: relative; padding-left: 24px; font-size: 16px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 10px; height: 6px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.plan .fineprint { margin: 0 0 20px; font-size: 14px; }
.plan .button { align-self: flex-start; }
.plan .soon { display: inline-block; margin-left: 8px; padding: 2px 8px; border: 1px solid var(--terracotta); border-radius: 999px; color: var(--terracotta); font-size: 12px; font-weight: 600; vertical-align: middle; }

/* FAQ */
.faq { margin: 48px 0 0; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 19px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--terracotta); font: 400 26px/1 var(--display); }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 70ch; margin: 0 0 22px; color: var(--ink-soft); }

/* Cierre con el ángel de la catedral */
.closing .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 72px; align-items: center; }
.closing figure { margin: 0; }
.closing .sculpture { max-width: 250px; margin-left: auto; }
.closing .section-title { max-width: 14ch; font-size: clamp(40px, 5vw, 68px); line-height: 1; }

footer.site { padding: 40px 0 56px; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: 13px; }
footer.site .wrap { display: grid; gap: 10px; }
footer.site .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer.site p { max-width: 90ch; margin: 0; }

@media (max-width: 900px) {
  .nav nav { display: none; }
  .hero { padding-top: 48px; }
  .hero-grid, .story .wrap,  .plate { max-width: 340px; }
  .story figure { max-width: 380px; }
  .closing .sculpture { margin-left: 0; max-width: 160px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--rule); }
  section { padding: 72px 0; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 32px); }
  .nav .button { display: none; }
  .hero .lede { font-size: 18px; }
  .story .dates { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
  .story .dates b { font-size: 26px; }
}
/* Esculturas recortadas sobre el mármol, con el trazado de Pacioli detrás:
   la proporción como primer algoritmo. Capas a distinta velocidad (parallax). */
.sculpture { position: relative; margin: 0; isolation: isolate; }
.sculpture img { position: relative; z-index: 1; display: block; width: 78%; margin: 0 auto; filter: drop-shadow(0 28px 26px oklch(0.3 0.02 60 / 0.22)); transform: translate3d(0, calc(var(--p, 0) * -56px), 0); }
.sculpture.tall img { width: 62%; }
.sculpture.tall .construction { top: 18%; }
.sculpture::after { content: ""; position: absolute; z-index: 0; left: 22%; right: 22%; bottom: -1%; height: 5%; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.3 0.02 60 / 0.3), transparent); transform: translate3d(0, calc(var(--p, 0) * -56px), 0); }
.construction { position: absolute; z-index: 0; left: -6%; top: 2%; width: 112%; height: auto; overflow: visible; fill: none; stroke: var(--serena); transform: translate3d(0, calc(var(--p, 0) * 44px), 0); }
.construction .draw > * { stroke-width: 1; vector-effect: non-scaling-stroke; }
.construction text { fill: var(--terracotta); stroke: none; font: italic 500 4px var(--display); letter-spacing: 0.04em; }
.motion .construction .draw > * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(0.22, 1, 0.36, 1); }
.motion .construction .draw > :nth-child(2) { transition-delay: 0.15s; }
.motion .construction .draw > :nth-child(3) { transition-delay: 0.3s; }
.motion .construction .draw > :nth-child(4) { transition-delay: 0.5s; }
.motion .construction .draw > :nth-child(5) { transition-delay: 0.7s; transition-duration: 2.4s; }
.motion .construction .draw > :nth-child(6) { transition-delay: 0.9s; }
.motion .construction text { opacity: 0; transition: opacity 0.8s 1.4s; }
.motion .in-view .construction .draw > * { stroke-dashoffset: 0; }
.motion .in-view .construction text { opacity: 1; }
.motion .sculpture img, .motion .shot, .motion.plan-common { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--ink); font-size: 16px; }
.plan-common li { position: relative; padding-left: 22px; }
.plan-common li::before { content: ""; position: absolute; left: 2px; top: 0.35em; width: 10px; height: 6px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }