/* drawn by pen · retratos — landing. Papel, tinta y tipografía de drawnbypen-studio: Instrument Serif de titulares,
   Manrope de texto y JetBrains Mono en antetítulos y pies; esquinas casi rectas y botones de píldora. */
:root { --bg: #FAFAF7; --panel: #FFFFFF; --panel2: #F2F2ED; --text: #111214; --text2: #3B3D43; --muted: #5B5D64; --line: #E3E3DD; --ink: #111214; --accent: #1E3FBF; --accent-soft: #E7EBFA; --shadow: rgba(17,18,20,.14);
  --font: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --curva: cubic-bezier(.16, 1, .3, 1); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
h3 { font-family: var(--font); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 6px; }
p { margin: 0 0 12px; color: var(--text2); }
.eyebrow { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 400; margin-bottom: 10px; }
.btn { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 26px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 15px; border: 1px solid transparent; }
.btn.pri { background: var(--ink); color: #fff; } .btn.pri:hover { opacity: .9; }
.btn.accent { background: var(--accent); color: #fff; } .btn.accent:hover { filter: brightness(1.08); }
.btn.sec { background: var(--panel); border-color: var(--line); } .btn.sec:hover { border-color: var(--muted); }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
section { padding: 88px 0; }

/* nav */
nav { position: sticky; top: 0; z-index: 10; background: rgba(250,250,247,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
nav .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.01em; }
.brand .word { white-space: nowrap; }
.brand .sect { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); margin-left: 2px; }
@media (max-width: 560px) { .brand .sect { display: none; } .brand { font-size: 21px; } }
.lw-brand .word { font-family: var(--serif); font-weight: 400; font-size: 14px; }
.brand .tile { width: 30px; height: 30px; border-radius: 6px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
nav .links { display: flex; gap: 18px; margin-left: auto; font-size: 14px; font-weight: 500; color: var(--text2); }
nav .links a { text-decoration: none; } nav .links a:hover { color: var(--text); }
nav .btn { height: 40px; padding: 0 18px; font-size: 14px; }

/* hero */
.hero { padding: 64px 0 40px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(44px, 5.4vw, 68px); margin-bottom: 20px; }
.hero h1 em { font-style: italic; color: var(--accent); }
h2 em { font-style: italic; color: var(--accent); }
/* la palabra del titular se escribe letra a letra (pluma → boli → rotulador) */
.typeword { white-space: nowrap; }
.hero h1 .typeword::after { content: ''; display: inline-block; width: 3px; height: .82em; background: var(--accent); margin-left: 4px; border-radius: 2px; vertical-align: -0.06em; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1 .typeword::after { display: none; } }
.hero p.lead { font-size: 18px; max-width: 520px; margin-bottom: 26px; }
.hero .claims { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero .note { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); margin-top: 16px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.compare figure { margin: 0; position: relative; }
.compare img { width: 100%; border-radius: 10px; box-shadow: 0 24px 60px var(--shadow); background: #fbfaf6; aspect-ratio: 148 / 210; object-fit: cover; }
.compare figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
.compare .arrow { position: absolute; left: -22px; top: 50%; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); box-shadow: 0 4px 12px var(--shadow); }
.compare figure:first-child img { transform: rotate(-2deg) scale(.94); }

/* pasos */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.step { background: var(--panel); border-radius: 4px; padding: 22px; box-shadow: 0 1px 2px rgba(28,27,24,.05); position: relative; }
.step .nrow { display: flex; align-items: center; gap: 11px; margin: 2px 0 8px; }
.step .n { font-family: var(--serif); font-size: 26px; color: var(--accent); line-height: 1; position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 5px 9px; flex: none; }
.step p { font-size: 14.5px; margin: 0; }
/* animación «a pluma» al entrar en pantalla: la tarjeta sube, el aro rodea el número y el icono se traza */
.step .ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); pointer-events: none; }
.step .ring path { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  #como .step { opacity: 0; transform: translateY(10px); }
  #como .step .ring path { stroke-dasharray: 100; stroke-dashoffset: 100; }
  #como.inview .step { animation: step-up .7s ease forwards; }
  #como.inview .step .ring path { animation: step-draw .9s ease-in-out forwards; }
  #como.inview .step:nth-child(1) { animation-delay: 0s; } #como.inview .step:nth-child(1) .ring path { animation-delay: .25s; }
  #como.inview .step:nth-child(2) { animation-delay: .3s; } #como.inview .step:nth-child(2) .ring path { animation-delay: .55s; }
  #como.inview .step:nth-child(3) { animation-delay: .6s; } #como.inview .step:nth-child(3) .ring path { animation-delay: .85s; }
}
@keyframes step-up { to { opacity: 1; transform: translateY(0); } }
@keyframes step-draw { to { stroke-dashoffset: 0; } }

/* estilos */
.styles { background: var(--panel2); } .styles .wrap > p:not(.stylecredits) { max-width: 640px; }
.stylegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 14px; row-gap: 26px; margin-top: 30px; }
.stylegrid a { text-decoration: none; display: flex; flex-direction: column; gap: 6px; }
.stylegrid .sthumb { position: relative; display: block; padding-bottom: 14px; }
.stylegrid .art { width: 100%; border-radius: 3px; aspect-ratio: 148 / 210; object-fit: cover; background: #fbfaf6; box-shadow: 0 1px 2px rgba(17,18,20,.06); transition: transform .15s; }
.stylegrid a:hover .art { transform: translateY(-3px); }
/* la foto de partida, pegada en la esquina como una copia de papel */
.stylegrid .ph { position: absolute; right: -8px; bottom: 0; width: 58px; height: 78px; object-fit: cover; border: 3px solid #fff; border-radius: 2px; box-shadow: 0 6px 14px rgba(17,18,20,.22); transform: rotate(-4deg); }
.stylegrid a:nth-child(6n+2) .ph { transform: rotate(3deg); } .stylegrid a:nth-child(6n+3) .ph { transform: rotate(-2deg); }
.stylegrid a:nth-child(6n+4) .ph { transform: rotate(5deg); } .stylegrid a:nth-child(6n+5) .ph { transform: rotate(-5deg); } .stylegrid a:nth-child(6n) .ph { transform: rotate(2deg); }
.stylegrid b { font-size: 14px; font-weight: 600; } .stylegrid small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); line-height: 1.4; }
.stylecredits { margin: 22px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
.morebtn { display: none; margin: 2px auto 0; align-items: center; gap: 6px; background: none; border: 0; padding: 10px 14px; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; }
.morebtn .ico { width: 16px; height: 16px; }
.morebtn:hover { color: #16309A; }

/* artesanía */
.craft .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.craft ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 14px; }
.craft li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--text2); }
.craft li b { display: block; color: var(--text); }
.craft li .dot { width: 36px; height: 36px; border-radius: 4px; background: var(--panel); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(28,27,24,.06); }
.plot { position: relative; background: var(--panel); border-radius: 6px; padding: 26px; box-shadow: 0 1px 2px rgba(28,27,24,.05); }
.plot img, .plot video { display: block; width: 100%; border-radius: 6px; box-shadow: 0 10px 30px var(--shadow); }
.plot .sim { position: absolute; left: 26px; right: 26px; bottom: 26px; height: 3px; background: linear-gradient(90deg, var(--accent) 62%, var(--line) 62%); border-radius: 999px; }
.plot .cap { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 14px; }

/* en papel — desde el 02/10/2026 la web no vende: quien lo quiera en papel nos escribe. El papel se tiñe del azul de la marca. */
.onpaper { background: linear-gradient(180deg, var(--bg) 0%, #E9EDF7 100%); }
.onpaper .wrap > p { max-width: 620px; margin: 0 0 24px; color: var(--text2); }
.onpaper .wrap > p.mailnote { margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em; color: var(--muted); }

/* faq */
.faq { background: var(--panel); }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--muted); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 10px 0 0; font-size: 15px; }
.faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 20px; }

/* final */
.final { text-align: center; padding: 80px 0; }
.final h2 { font-size: clamp(30px, 4.6vw, 48px); }
footer { border-top: 1px solid var(--line); padding: 26px 0 40px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 860px) {
  section { padding: 52px 0; }
  nav .links { display: none; }
  .hero { padding: 36px 0 24px; } .hero .wrap, .craft .wrap { grid-template-columns: 1fr; gap: 30px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .faqgrid { grid-template-columns: 1fr; }
  .compare .arrow { display: none; }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  /* móvil: las FAQ colapsadas hasta que se piden */
  #faq .faqgrid { display: none; }
  #faq.open .faqgrid { display: grid; }
  /* móvil: 6 estilos en pequeño y botón para ver el resto */
  .stylegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 22px; }
  .stylegrid a { gap: 4px; }
  .stylegrid .sthumb { padding-bottom: 12px; }
  .stylegrid .ph { right: -6px; width: 52px; height: 70px; }
  .stylegrid a small { display: none; }
  .stylegrid:not(.open) a:nth-child(n+7) { display: none; }
  .morebtn { display: flex; }
}

/* portada: retrato dibujándose en directo */
.showcase { display: flex; flex-direction: column; gap: 10px; max-width: 600px; justify-self: center; width: 100%; }
/* Ventana del laboratorio: maqueta de la interfaz (panel de pasos, estilos, ajustes, papel y tinta) con el lienzo a la
   derecha, donde se van generando retratos en directo, uno por estilo de muestra. El panel es decorativo (aria-hidden) y lleva al laboratorio. */
.labwin { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 30px 70px rgba(28,27,24,.18); overflow: hidden; }
/* la app dentro de la ventana: barra de pasos arriba, el dibujo (estilo y ajustes) a la izquierda y el pedido a la derecha, plegado */
.lw-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%) minmax(0, 1fr); align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.lw-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; }
.lw-brand i { width: 20px; height: 20px; border-radius: 6px; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .lw-brand .ico { width: 10px; height: 10px; }
.lw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; font-size: 10px; font-weight: 600; color: #7C7D82; line-height: 1.3; white-space: nowrap; }
.lw-steps span::before { content: ''; display: block; height: 3px; border-radius: 999px; background: #DCDCD5; margin-bottom: 3px; }
.lw-steps .done { color: #5B5D64; } .lw-steps .done::before { background: var(--ink); }
.lw-steps .on { color: var(--text); } .lw-steps .on::before { background: var(--accent); }
.lw-body { display: grid; grid-template-columns: minmax(0, 27%) minmax(0, 1fr) minmax(0, 27%); background: var(--bg); }
.lw-side { display: flex; flex-direction: column; gap: 7px; padding: 10px; text-decoration: none; color: var(--text); cursor: pointer; min-width: 0; }
.lw-left { border-right: 1px solid var(--line); } .lw-right { border-left: 1px solid var(--line); }
.lw-box { display: flex; flex-direction: column; gap: 7px; padding: 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel); min-width: 0; }
.lw-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 10.5px; white-space: nowrap; } .lw-h b { font-weight: 600; }
.lw-h span { color: #5B5D64; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
.lw-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.lw-thumbs span { display: block; padding: 2px; border-radius: 3px; border: 1.5px solid var(--line); background: var(--panel); transition: border-color .3s, background .3s; }
.lw-thumbs span.on { border-color: var(--accent); background: var(--accent-soft); }
.lw-thumbs img { display: block; width: 100%; aspect-ratio: 148 / 210; object-fit: cover; border-radius: 4px; background: #fbfaf6; }
.lw-sliders { display: flex; flex-direction: column; gap: 9px; padding-bottom: 5px; }
.lw-sl > div { display: flex; justify-content: space-between; gap: 4px; font-size: 10px; font-weight: 500; color: var(--text2); margin-bottom: 5px; white-space: nowrap; } .lw-sl > div span:first-child { overflow: hidden; text-overflow: ellipsis; } .lw-sl > div span:last-child { color: #5B5D64; font-variant-numeric: tabular-nums; }
.lw-sl > i { display: block; position: relative; height: 3px; border-radius: 999px; background: linear-gradient(to right, var(--ink) var(--p), #DCDCD5 var(--p)); }
.lw-sl > i::after { content: ''; position: absolute; left: calc(var(--p) - 5px); top: -4px; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.lw-rows { display: flex; flex-direction: column; gap: 7px; }
.lw-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px; font-size: 10.5px; white-space: nowrap; } .lw-row b { font-weight: 600; }
.lw-row span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: #5B5D64; font-size: 10px; }
.lw-row span::after { content: '+'; margin-left: 3px; font-size: 12px; line-height: 1; color: #7C7D82; }
.lw-row .sw { width: 11px; height: 11px; border-radius: 3px; border: 1px solid rgba(28,27,24,.2); box-sizing: border-box; } .lw-row .dot { width: 9px; height: 9px; border-radius: 50%; }
.lw-btns { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.lw-btns span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.lw-btns .sec { padding: 0 8px; border: 1px solid #DCDCD5; background: var(--panel); } .lw-btns .go { flex: 1; background: var(--accent); color: #fff; } .lw-btns .ico { width: 13px; height: 13px; }
.lw-right .lw-btns .sec .ico { display: none; }
.lw-stage { position: relative; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 44px 18px; min-width: 0; }
.lw-stage .paper { width: min(100%, 270px); }
.lw-status, .lw-zoom { position: absolute; font-size: 11px; font-weight: 500; color: #5B5D64; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.lw-status { left: 12px; top: 10px; } .lw-zoom { right: 12px; bottom: 10px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  /* móvil: como la hoja del laboratorio, el lienzo arriba y debajo las cajas: estilo y ajustes, y el pedido plegado de dos en dos */
  .lw-body { grid-template-columns: 1fr; } .lw-stage { order: -1; padding: 40px 16px; } .lw-stage .paper { width: min(64%, 230px); }
  .lw-top { grid-template-columns: auto minmax(0, 1fr); } .lw-side { padding: 10px 12px; gap: 8px; }
  .lw-left { border-right: 0; border-top: 1px solid var(--line); flex-direction: row; padding-bottom: 0; } .lw-left .lw-box { flex: 1; } .lw-sl:nth-child(3) { display: none; }
  .lw-right { border-left: 0; } .lw-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lw-right .lw-btns .sec .ico { display: block; } .lw-btns span { height: 38px; font-size: 12.5px; }
}
.showcase .paper { position: relative; aspect-ratio: 148 / 210; background: #fbfaf6; border-radius: 3px; box-shadow: 0 24px 60px var(--shadow); overflow: hidden; }
.showcase .paper .ph { position: absolute; left: 5.4%; top: 3.81%; width: 89.2%; height: 92.38%; object-fit: cover; opacity: .16; filter: grayscale(1); }
.showcase canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scmeta .cap small { font-size: 11px; color: var(--muted); }
/* el relevo: el Lab (retrato dibujándose) y la pareja «foto → dibujo» de un encargo terminado se turnan en el mismo marco.
   La pareja ocupa la ventana entera: el Lab se encoge al 94 % y se apaga mientras ella crece hasta su sitio (0,75 s). */
.labwin { position: relative; }
.labwin > .lw-top, .labwin > .lw-body, .labwin > .scpair { transition: opacity .75s var(--curva), transform .75s var(--curva); }
.labwin.pair > .lw-top, .labwin.pair > .lw-body { opacity: 0; transform: scale(.94); }
.scpair { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--panel); opacity: 0; transform: scale(.94); pointer-events: none; }
.labwin.pair > .scpair { opacity: 1; transform: none; pointer-events: auto; }
.sp-top { flex: none; height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.sp-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.sp-body figure { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.sp-ph { background: var(--panel2); } .sp-art { background: var(--panel); border-left: 1px solid var(--line); }
.sp-body img { display: block; height: min(100%, 300px); max-height: calc(100% - 26px); max-width: 100%; aspect-ratio: 148 / 210; object-fit: cover; border-radius: 2px; }
.sp-art img { background: #fbfaf6; box-shadow: 0 12px 30px rgba(17,18,20,.16); border-radius: 0; }
.sp-body figcaption { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--muted); text-align: center; }
.sp-body .arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 999px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 6px 16px rgba(17,18,20,.24); }
.sp-foot { flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--bg); }
.sp-label { font-size: 12.5px; color: var(--text2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 15px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; text-decoration: none; }
@media (max-width: 700px) {
  .sp-body figure { padding: 14px 10px; } .sp-body .arrow { width: 28px; height: 28px; font-size: 13px; }
  .sp-label { display: none; } .sp-foot { justify-content: flex-end; } .sp-meta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .labwin > .lw-top, .labwin > .lw-body, .labwin > .scpair { transition: none; } }

/* barra de acción: aparece al dejar atrás la portada y se retira al llegar al último aviso */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(250,250,247,.94); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); visibility: hidden; transition: transform .55s var(--curva), visibility .55s; }
.actionbar.on { transform: none; visibility: visible; }
.actionbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 68px; }
.actionbar .txt { font-size: 14px; color: var(--text2); } .actionbar .txt b { color: var(--text); font-weight: 600; }
.actionbar .btn { height: 42px; }
@media (max-width: 700px) { .actionbar .wrap { height: 72px; } .actionbar .txt { display: none; } .actionbar .btn { flex: 1; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .actionbar { transition: none; } }
.herovisual { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.showcase .pen { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; box-shadow: 0 1px 4px var(--shadow); will-change: transform; }
.scbar { height: 3px; border-radius: 999px; background: var(--line); overflow: hidden; }
.scbar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; }
.scmeta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.scmeta .cap b { color: var(--text); }
.scmeta .dots { display: flex; gap: 6px; }
.scmeta .dots button { width: 7px; height: 7px; padding: 0; border-radius: 999px; border: 0; background: #CFCFC7; cursor: pointer; transition: width .4s var(--curva), background .4s var(--curva); }
.scmeta .dots button.on { width: 22px; background: var(--ink); }


/* «Cómo funciona»: escenas animadas (dibujadas a línea, en bucle) */
.scene { width: 100%; height: auto; display: block; margin-bottom: 12px; background: var(--panel2); border-radius: 4px; }
.scene path, .scene rect, .scene circle, .scene line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .acc { stroke: var(--accent); } .scene .sep { stroke: #8A5A32; } .scene .mut { stroke: #B6B7BA; }
.scene .fillw { fill: #FFFFFF; }

/* ── 1 · la foto viaja del móvil a la zona de subida ── */
.s1 .fly { animation: s1fly 7s ease-in-out infinite; }
.s1 .trail { stroke-dasharray: 2 7; opacity: 0; animation: s1trail 7s linear infinite, s1march 0.7s linear infinite; }
.s1 .zone { stroke-dasharray: 5 6; }
.s1 .corners { opacity: 0; animation: s1corners 7s linear infinite; }
.s1 .check { stroke-dasharray: 100; stroke-dashoffset: 100; animation: s1check 7s ease-out infinite; }
@keyframes s1fly {
  0%, 8% { transform: translate(38px, 56px) scale(.92); opacity: 0; }
  12% { transform: translate(38px, 52px) scale(1); opacity: 1; }
  22% { transform: translate(90px, 24px) rotate(-6deg); }
  32% { transform: translate(150px, 16px) rotate(5deg); }
  42% { transform: translate(213px, 58px) rotate(0deg) scale(1); opacity: 1; }
  80% { transform: translate(213px, 58px); opacity: 1; }
  88%, 100% { transform: translate(213px, 58px); opacity: 0; }
}
@keyframes s1trail { 0%, 12% { opacity: 0; } 16% { opacity: 1; } 42% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes s1march { to { stroke-dashoffset: -9; } }
@keyframes s1corners { 0%, 42% { opacity: 0; } 46%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes s1check { 0%, 46% { stroke-dashoffset: 100; opacity: 1; } 58% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ── 2 · estilo + papel + tinta, con vista previa en vivo ── */
.s2 { --T: 12s; }
.s2 .cursor { animation: s2cur var(--T) ease-in-out infinite; }
.s2 .pulse { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s2pulse var(--T) ease-out infinite; }
.s2 .sel { animation: s2sel var(--T) steps(1) infinite; }
.s2 .pprev { fill: #FBFAF6; animation: s2paper var(--T) linear infinite; }
.s2 .fill { opacity: 0; animation: s2show var(--T) linear infinite; }
.s2 .fill path, .s2 .fill circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: s2draw var(--T) ease-out infinite; }
.s2 .f1 path { stroke: var(--accent); }
.s2 .f2 circle { stroke: #8A5A32; }
.s2 .f2, .s2 .f2 circle { animation-delay: calc(var(--T) / 3); }
.s2 .f3, .s2 .f3 path { animation-delay: calc(var(--T) * 2 / 3); }
.s2 .ir, .s2 .pr { opacity: 0; }
.s2 .ir1 { animation: s2w1 var(--T) steps(1) infinite; } .s2 .pr1 { animation: s2v1 var(--T) steps(1) infinite; }
.s2 .ir2 { animation: s2w2 var(--T) steps(1) infinite; } .s2 .pr2 { animation: s2v2 var(--T) steps(1) infinite; }
.s2 .ir3 { animation: s2w3 var(--T) steps(1) infinite; } .s2 .pr3 { animation: s2v3 var(--T) steps(1) infinite; }
@keyframes s2cur {
  0% { transform: translate(34px, 116px); } 6% { transform: translate(28px, 46px); } 8% { transform: translate(28px, 46px); }
  15% { transform: translate(118px, 95px); } 17% { transform: translate(118px, 95px); }
  24% { transform: translate(26px, 95px); } 26% { transform: translate(26px, 95px); }
  33.3% { transform: translate(60px, 70px); } 39% { transform: translate(72px, 46px); } 41% { transform: translate(72px, 46px); }
  48% { transform: translate(140px, 95px); } 50% { transform: translate(140px, 95px); }
  57% { transform: translate(58px, 95px); } 59% { transform: translate(58px, 95px); }
  66.6% { transform: translate(100px, 70px); } 72% { transform: translate(116px, 46px); } 74% { transform: translate(116px, 46px); }
  81% { transform: translate(162px, 95px); } 83% { transform: translate(162px, 95px); }
  90% { transform: translate(90px, 95px); } 92% { transform: translate(90px, 95px); } 100% { transform: translate(34px, 116px); }
}
@keyframes s2pulse {
  0%, 6% { opacity: 0; transform: scale(.4); } 8% { opacity: .9; } 11% { opacity: 0; transform: scale(1.5); }
  14.5% { opacity: 0; transform: scale(.4); } 16.5% { opacity: .9; } 19.5% { opacity: 0; transform: scale(1.5); }
  23.5% { opacity: 0; transform: scale(.4); } 25.5% { opacity: .9; } 28.5% { opacity: 0; transform: scale(1.5); }
  38.5% { opacity: 0; transform: scale(.4); } 40.5% { opacity: .9; } 43.5% { opacity: 0; transform: scale(1.5); }
  47.5% { opacity: 0; transform: scale(.4); } 49.5% { opacity: .9; } 52.5% { opacity: 0; transform: scale(1.5); }
  56.5% { opacity: 0; transform: scale(.4); } 58.5% { opacity: .9; } 61.5% { opacity: 0; transform: scale(1.5); }
  71.5% { opacity: 0; transform: scale(.4); } 73.5% { opacity: .9; } 76.5% { opacity: 0; transform: scale(1.5); }
  80.5% { opacity: 0; transform: scale(.4); } 82.5% { opacity: .9; } 85.5% { opacity: 0; transform: scale(1.5); }
  89.5% { opacity: 0; transform: scale(.4); } 91.5% { opacity: .9; } 94.5% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}
@keyframes s2sel { 0% { transform: translateX(0); } 33.3% { transform: translateX(44px); } 66.6% { transform: translateX(88px); } 100% { transform: translateX(0); } }
@keyframes s2paper { 0%, 58% { fill: #FBFAF6; } 60%, 91% { fill: #F4ECD8; } 93%, 100% { fill: #DDDDD9; } }
@keyframes s2show { 0%, 8% { opacity: 0; } 10% { opacity: 1; } 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes s2draw { 0%, 9% { stroke-dashoffset: 100; } 22% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes s2w1 { 0%, 15% { opacity: 0; } 16%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes s2v1 { 0%, 24% { opacity: 0; } 25%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes s2w2 { 0%, 48% { opacity: 0; } 49%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes s2v2 { 0%, 57% { opacity: 0; } 58%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes s2w3 { 0%, 81% { opacity: 0; } 82%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s2v3 { 0%, 90% { opacity: 0; } 91%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* ── 3 · el plotter iDraw cambia de pluma, de tinta y de papel ── */
.s3 .belt { stroke-dasharray: 4 5; animation: s3belt 1.1s linear infinite; }
.s3 .car { animation: s3car 13.5s ease-in-out infinite; }
.s3 .paper { fill: #FBFAF6; animation: s3paper 13.5s linear infinite; }
.s3 .rp1 { animation: s3rp1 13.5s steps(1) infinite; } .s3 .cp1 { opacity: 0; animation: s3cp1 13.5s steps(1) infinite; }
.s3 .rp2 { animation: s3rp2 13.5s steps(1) infinite; } .s3 .cp2 { opacity: 0; animation: s3cp2 13.5s steps(1) infinite; }
.s3 .rp3 { animation: s3rp3 13.5s steps(1) infinite; } .s3 .cp3 { opacity: 0; animation: s3cp3 13.5s steps(1) infinite; }
.s3 .q1, .s3 .q2, .s3 .q3 { stroke-dasharray: 100; stroke-dashoffset: 100; }
.s3 .q1 { animation: s3q1 13.5s linear infinite; }
.s3 .q2 { animation: s3q2 13.5s linear infinite; }
.s3 .q3 { animation: s3q3 13.5s linear infinite; }
@keyframes s3belt { to { stroke-dashoffset: -9; } }
@keyframes s3car {
  0% { transform: translateX(62px); } 6% { transform: translateX(210px); } 9% { transform: translateX(210px); }
  15% { transform: translateX(48px); animation-timing-function: linear; } 26% { transform: translateX(160px); } 30% { transform: translateX(160px); }
  32.5% { transform: translateX(210px); } 33.3% { transform: translateX(210px); }
  36% { transform: translateX(228px); } 39% { transform: translateX(228px); }
  45% { transform: translateX(48px); animation-timing-function: linear; } 56% { transform: translateX(160px); } 60% { transform: translateX(160px); }
  62.5% { transform: translateX(228px); } 66.6% { transform: translateX(228px); }
  69% { transform: translateX(246px); } 72% { transform: translateX(246px); }
  78% { transform: translateX(48px); animation-timing-function: linear; } 89% { transform: translateX(160px); } 93% { transform: translateX(160px); }
  95.5% { transform: translateX(246px); } 98% { transform: translateX(246px); } 100% { transform: translateX(62px); }
}
@keyframes s3paper { 0%, 31% { fill: #FBFAF6; } 34%, 64% { fill: #F4ECD8; } 67%, 97% { fill: #DDDDD9; } 100% { fill: #FBFAF6; } }
@keyframes s3rp1 { 0%, 6% { opacity: 1; } 7%, 32% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes s3cp1 { 0%, 6% { opacity: 0; } 7%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes s3rp2 { 0%, 36% { opacity: 1; } 37%, 62% { opacity: 0; } 63%, 100% { opacity: 1; } }
@keyframes s3cp2 { 0%, 36% { opacity: 0; } 37%, 62% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes s3rp3 { 0%, 69% { opacity: 1; } 70%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes s3cp3 { 0%, 69% { opacity: 0; } 70%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes s3q1 { 0%, 15% { stroke-dashoffset: 100; opacity: 1; } 26% { stroke-dashoffset: 0; } 31% { stroke-dashoffset: 0; opacity: 1; } 33%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3q2 { 0%, 45% { stroke-dashoffset: 100; opacity: 1; } 56% { stroke-dashoffset: 0; } 64% { stroke-dashoffset: 0; opacity: 1; } 66%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3q3 { 0%, 78% { stroke-dashoffset: 100; opacity: 1; } 89% { stroke-dashoffset: 0; } 97% { stroke-dashoffset: 0; opacity: 1; } 99%, 100% { stroke-dashoffset: 100; opacity: 0; } }

/* «Cómo funciona»: escenas animadas (dibujadas a línea, en bucle) */
.scene { width: 100%; height: auto; display: block; margin-bottom: 12px; background: var(--panel2); border-radius: 4px; }
.scene path, .scene rect, .scene circle, .scene line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .acc { stroke: var(--accent); } .scene .sep { stroke: #8A5A32; } .scene .mut { stroke: #B6B7BA; }
.scene .fillw { fill: #FFFFFF; }

/* ── 1 · la foto viaja del móvil a la zona de subida ── */
.s1 .fly { animation: s1fly 7s ease-in-out infinite; }
.s1 .trail { stroke-dasharray: 2 7; opacity: 0; animation: s1trail 7s linear infinite, s1march 0.7s linear infinite; }
.s1 .zone { stroke-dasharray: 5 6; }
.s1 .corners { opacity: 0; animation: s1corners 7s linear infinite; }
.s1 .check { stroke-dasharray: 100; stroke-dashoffset: 100; animation: s1check 7s ease-out infinite; }
@keyframes s1fly {
  0%, 8% { transform: translate(38px, 56px) scale(.92); opacity: 0; }
  12% { transform: translate(38px, 52px) scale(1); opacity: 1; }
  22% { transform: translate(90px, 24px) rotate(-6deg); }
  32% { transform: translate(150px, 16px) rotate(5deg); }
  42% { transform: translate(213px, 58px) rotate(0deg) scale(1); opacity: 1; }
  80% { transform: translate(213px, 58px); opacity: 1; }
  88%, 100% { transform: translate(213px, 58px); opacity: 0; }
}
@keyframes s1trail { 0%, 12% { opacity: 0; } 16% { opacity: 1; } 42% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes s1march { to { stroke-dashoffset: -9; } }
@keyframes s1corners { 0%, 42% { opacity: 0; } 46%, 80% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes s1check { 0%, 46% { stroke-dashoffset: 100; opacity: 1; } 58% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ── 2 · estilo + papel + tinta, con vista previa en vivo ── */
.s2 { --T: 12s; }
.s2 .cursor { animation: s2cur var(--T) ease-in-out infinite; }
.s2 .pulse { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s2pulse var(--T) ease-out infinite; }
.s2 .sel { animation: s2sel var(--T) steps(1) infinite; }
.s2 .pprev { fill: #FBFAF6; animation: s2paper var(--T) linear infinite; }
.s2 .fill { opacity: 0; animation: s2show var(--T) linear infinite; }
.s2 .fill path, .s2 .fill circle { stroke-dasharray: 100; stroke-dashoffset: 100; animation: s2draw var(--T) ease-out infinite; }
.s2 .f1 path { stroke: var(--accent); }
.s2 .f2 circle { stroke: #8A5A32; }
.s2 .f2, .s2 .f2 circle { animation-delay: calc(var(--T) / 3); }
.s2 .f3, .s2 .f3 path { animation-delay: calc(var(--T) * 2 / 3); }
.s2 .ir, .s2 .pr { opacity: 0; }
.s2 .ir1 { animation: s2w1 var(--T) steps(1) infinite; } .s2 .pr1 { animation: s2v1 var(--T) steps(1) infinite; }
.s2 .ir2 { animation: s2w2 var(--T) steps(1) infinite; } .s2 .pr2 { animation: s2v2 var(--T) steps(1) infinite; }
.s2 .ir3 { animation: s2w3 var(--T) steps(1) infinite; } .s2 .pr3 { animation: s2v3 var(--T) steps(1) infinite; }
@keyframes s2cur {
  0% { transform: translate(34px, 116px); } 6% { transform: translate(28px, 46px); } 8% { transform: translate(28px, 46px); }
  15% { transform: translate(118px, 95px); } 17% { transform: translate(118px, 95px); }
  24% { transform: translate(26px, 95px); } 26% { transform: translate(26px, 95px); }
  33.3% { transform: translate(60px, 70px); } 39% { transform: translate(72px, 46px); } 41% { transform: translate(72px, 46px); }
  48% { transform: translate(140px, 95px); } 50% { transform: translate(140px, 95px); }
  57% { transform: translate(58px, 95px); } 59% { transform: translate(58px, 95px); }
  66.6% { transform: translate(100px, 70px); } 72% { transform: translate(116px, 46px); } 74% { transform: translate(116px, 46px); }
  81% { transform: translate(162px, 95px); } 83% { transform: translate(162px, 95px); }
  90% { transform: translate(90px, 95px); } 92% { transform: translate(90px, 95px); } 100% { transform: translate(34px, 116px); }
}
@keyframes s2pulse {
  0%, 6% { opacity: 0; transform: scale(.4); } 8% { opacity: .9; } 11% { opacity: 0; transform: scale(1.5); }
  14.5% { opacity: 0; transform: scale(.4); } 16.5% { opacity: .9; } 19.5% { opacity: 0; transform: scale(1.5); }
  23.5% { opacity: 0; transform: scale(.4); } 25.5% { opacity: .9; } 28.5% { opacity: 0; transform: scale(1.5); }
  38.5% { opacity: 0; transform: scale(.4); } 40.5% { opacity: .9; } 43.5% { opacity: 0; transform: scale(1.5); }
  47.5% { opacity: 0; transform: scale(.4); } 49.5% { opacity: .9; } 52.5% { opacity: 0; transform: scale(1.5); }
  56.5% { opacity: 0; transform: scale(.4); } 58.5% { opacity: .9; } 61.5% { opacity: 0; transform: scale(1.5); }
  71.5% { opacity: 0; transform: scale(.4); } 73.5% { opacity: .9; } 76.5% { opacity: 0; transform: scale(1.5); }
  80.5% { opacity: 0; transform: scale(.4); } 82.5% { opacity: .9; } 85.5% { opacity: 0; transform: scale(1.5); }
  89.5% { opacity: 0; transform: scale(.4); } 91.5% { opacity: .9; } 94.5% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}
@keyframes s2sel { 0% { transform: translateX(0); } 33.3% { transform: translateX(44px); } 66.6% { transform: translateX(88px); } 100% { transform: translateX(0); } }
@keyframes s2paper { 0%, 58% { fill: #FBFAF6; } 60%, 91% { fill: #F4ECD8; } 93%, 100% { fill: #DDDDD9; } }
@keyframes s2show { 0%, 8% { opacity: 0; } 10% { opacity: 1; } 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes s2draw { 0%, 9% { stroke-dashoffset: 100; } 22% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes s2w1 { 0%, 15% { opacity: 0; } 16%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes s2v1 { 0%, 24% { opacity: 0; } 25%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes s2w2 { 0%, 48% { opacity: 0; } 49%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes s2v2 { 0%, 57% { opacity: 0; } 58%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes s2w3 { 0%, 81% { opacity: 0; } 82%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes s2v3 { 0%, 90% { opacity: 0; } 91%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* ── 3 · el plotter dibuja → paquete → ruta a casa ── */
.s3 .belt { stroke-dasharray: 4 5; animation: s3belt 1.1s linear infinite; }
.s3 .car { animation: s3car 13s ease-in-out infinite; }
.s3 .d1, .s3 .d2, .s3 .d3, .s3 .d4 { stroke-dasharray: 100; stroke-dashoffset: 100; }
.s3 .d1 { animation: s3d1 13s linear infinite; }
.s3 .d2 { animation: s3d2 13s linear infinite; }
.s3 .d3 { animation: s3d3 13s linear infinite; }
.s3 .d4 { animation: s3d4 13s linear infinite; }
.s3 .arrow1 { stroke-dasharray: 100; stroke-dashoffset: 100; animation: s3arrow 13s ease-out infinite; }
.s3 .flapL { transform-origin: 150px 70px; animation: s3flapL 13s ease-in-out infinite; }
.s3 .flapR { transform-origin: 196px 70px; animation: s3flapR 13s ease-in-out infinite; }
.s3 .tape { stroke-dasharray: 100; stroke-dashoffset: 100; animation: s3tape 13s ease-out infinite; }
.s3 .route { stroke-dasharray: 3 6; opacity: 0; animation: s3route 13s linear infinite; }
.s3 .dot { opacity: 0; animation: s3dot 13s ease-in-out infinite; }
.s3 .house { stroke-dasharray: 100; stroke-dashoffset: 100; animation: s3house 13s ease-out infinite; }
@keyframes s3belt { to { stroke-dashoffset: -9; } }
@keyframes s3car {
  0% { transform: translateX(66px); } 5% { transform: translateX(52px); } 11% { transform: translateX(84px); }
  17% { transform: translateX(58px); } 23% { transform: translateX(78px); } 30% { transform: translateX(66px); }
  100% { transform: translateX(66px); }
}
@keyframes s3d1 { 0%, 4% { stroke-dashoffset: 100; opacity: 1; } 14% { stroke-dashoffset: 0; } 93% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 98%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3d2 { 0%, 14% { stroke-dashoffset: 100; opacity: 1; } 18% { stroke-dashoffset: 0; } 93% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 98%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3d3 { 0%, 18% { stroke-dashoffset: 100; opacity: 1; } 22% { stroke-dashoffset: 0; } 93% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 98%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3d4 { 0%, 22% { stroke-dashoffset: 100; opacity: 1; } 30% { stroke-dashoffset: 0; } 93% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 98%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3arrow { 0%, 33% { stroke-dashoffset: 100; opacity: 1; } 39% { stroke-dashoffset: 0; } 92% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 98%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3flapL { 0%, 42% { transform: rotate(-105deg); } 50%, 95% { transform: rotate(0deg); } 100% { transform: rotate(-105deg); } }
@keyframes s3flapR { 0%, 42% { transform: rotate(105deg); } 50%, 95% { transform: rotate(0deg); } 100% { transform: rotate(105deg); } }
@keyframes s3tape { 0%, 52% { stroke-dashoffset: 100; opacity: 1; } 58% { stroke-dashoffset: 0; } 93% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 98%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes s3route { 0%, 60% { opacity: 0; } 64%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes s3dot {
  0%, 62% { transform: translate(198px, 82px); opacity: 0; }
  64% { opacity: 1; }
  70% { transform: translate(218px, 62px); }
  78% { transform: translate(238px, 60px); }
  86% { transform: translate(256px, 78px); opacity: 1; }
  89%, 100% { transform: translate(256px, 78px); opacity: 0; }
}
@keyframes s3house { 0%, 80% { stroke-dashoffset: 100; opacity: 1; } 90% { stroke-dashoffset: 0; } 94% { stroke-dashoffset: 0; opacity: 1; } 97% { stroke-dashoffset: 0; opacity: 0; } 98%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scene * { animation: none !important; }
  .s1 .fly, .s1 .trail, .s2 .cursor, .s2 .pulse, .s2 .f2, .s2 .f3, .s3 .cp1, .s3 .cp2, .s3 .cp3 { display: none; }
  .s1 .corners { opacity: 1; }
  .s1 .check { stroke-dashoffset: 0; }
  .s2 .fill.f1 { opacity: 1; }
  .s2 .fill.f1 path { stroke-dashoffset: 0; }
  .s2 .ir1, .s2 .pr1 { opacity: 1; }
  .s3 .car { transform: translateX(62px); }
  .s3 .q1 { stroke-dashoffset: 0; opacity: 1; }
}