/* zoelux — landing. Dirección «Loud and flat» (tasteskill): campos planos de
   color de la marca, tipografía muy pesada y Lumi recortada, asomándose de
   sección en sección. Sin degradados, sin sombras, sin líneas. */

@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url('/fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url('/fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url('/fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-display: swap; src: url('/fonts/manrope-latin-800-normal.woff2') format('woff2'); }

:root {
  /* Marca */
  --pine: #15735A;
  --night: #0B271F;
  --sun: #FF8E02;      /* el naranja de Lumi */
  --honey: #FFD27A;    /* el centro de la llama */
  --amber: #9C4F00;
  --paper: #F8F7F4;
  --paper-2: #EDE8DD;
  --ink: #15120E;

  /* Cinco tamaños de texto */
  --t-xl: clamp(76px, 14vw, 240px);
  --t-l: clamp(34px, 5vw, 84px);
  --t-m: clamp(22px, 2.2vw, 32px);
  --t-b: 18px;
  --t-s: 15px;
  --t-xxl: clamp(96px, 26vw, 460px);

  --m: clamp(16px, 3vw, 44px);          /* margen de página */
  --gap-section: clamp(96px, 12vw, 200px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* En el celular, la misma escala de cinco tamaños, ajustada al ancho. */
@media (max-width: 760px) {
  :root { --t-xl: 19vw; --t-l: 10.5vw; --t-m: 22px; --t-b: 18px; --t-s: 15px; --t-xxl: 30vw; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--t-b); line-height: 1.55; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
::selection { background: var(--honey); color: var(--night); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -60px; z-index: 50; background: var(--sun); color: var(--night); padding: 10px 16px; font-weight: 700; }
.skip:focus { top: 12px; }

.display { font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; }

/* ---------- Botones: planos, esquinas rectas ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px;
  font: 700 var(--t-b)/1 var(--font); text-decoration: none; border: 0; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-sun { background: var(--sun); color: var(--night); }
.btn-ink { background: var(--night); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .btn-sun:hover { background: var(--honey); }
  .btn-ink:hover { background: var(--pine); }
}

/* ---------- Barra: sin fondo propio, toma el campo de debajo ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: 28px;
  padding: 14px var(--m); background: var(--bar-bg, var(--pine)); color: var(--bar-ink, var(--paper));
  transition: background-color 300ms ease, color 300ms ease;
}
.bar-brand { margin-right: auto; display: block; }
.bar-brand img { height: 30px; width: auto; }
.bar .logo-dark { display: none; }
.bar[data-ink='dark'] .logo-dark { display: block; }
.bar[data-ink='dark'] .logo-light { display: none; }
.bar-links { display: flex; gap: 24px; }
.bar-links a, .bar-login { font-size: var(--t-s); font-weight: 700; text-decoration: none; padding: 10px 0; }
.bar-links a:hover, .bar-login:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) { .bar-links { display: none; } .bar { padding: 10px 16px; } .bar-brand img { height: 26px; } }

section, .cta, .foot { position: relative; }

/* ---------- Portada ---------- */
.hero {
  min-height: 100svh; background: var(--pine); color: var(--paper); overflow: hidden;
  padding: max(17svh, 120px) var(--m) clamp(28px, 5svh, 56px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.hero-title { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.05em; line-height: 0.84; max-width: 13ch; position: relative; z-index: 2; }
.hero-title span { display: block; }
.hero-l1 { color: var(--paper); }
.hero-l2 { color: var(--honey); }
.hero-foot { display: flex; justify-content: flex-start; position: relative; z-index: 2; }
.hero-copy { width: min(760px, 100%); }
.hero-copy p { font-size: var(--t-m); line-height: 1.3; font-weight: 500; }
.hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.link-light { color: var(--paper); font-weight: 700; text-underline-offset: 5px; padding: 12px 0; }

/* Lumi se asoma por el borde derecho, inclinada, sin tapar el título. */
.hero-lumi {
  position: absolute; right: 0; bottom: clamp(40px, 12svh, 140px); z-index: 1;
  display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--paper);
  transform: translateX(26%) rotate(-5deg); transition: transform 500ms var(--ease-out);
}
.hero-lumi-art svg { width: clamp(170px, 26vw, 380px); height: auto; }
.hero-lumi-note { order: -1; font-size: var(--t-b); font-weight: 700; line-height: 1.3; text-align: right; transform: rotate(5deg); }
.hero-lumi:hover, .hero-lumi:focus-visible { transform: translateX(10%) rotate(-2deg); }
@media (max-width: 760px) {
  .hero { padding-top: 15svh; }
  .hero-lumi { bottom: auto; top: 44svh; transform: translateX(30%) rotate(-6deg); }
  .hero-lumi-art svg { width: 190px; }
}

/* ---------- Tablero del problema ---------- */
.board {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 38svh 38svh auto;
  gap: 8px; padding: 8px; background: var(--paper);
}
.tile { margin: 0; overflow: hidden; position: relative; }
.tile-a { grid-column: 1 / 9; grid-row: 1 / 3; background: var(--night); color: var(--paper); display: flex; align-items: flex-end; padding: 0 0 28px clamp(20px, 2.5vw, 40px); }
.tile-a h2 { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.05em; line-height: 0.86; max-width: 7ch; }
.tile-b { grid-column: 9 / 13; grid-row: 1; background: var(--honey); color: var(--night); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; }
.tile-word { font-size: var(--t-xl); font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; }
.tile-note { font-size: var(--t-b); font-weight: 700; margin-top: 12px; }
.tile-c { grid-column: 9 / 13; grid-row: 2; background: #000; }
.tile-video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.tile-text { grid-column: 1 / 13; grid-row: 3; background: var(--paper-2); display: grid; grid-template-columns: repeat(12, 1fr); padding: clamp(36px, 5vw, 80px) 40px; }
.tile-statement { grid-column: 1 / 6; font-size: var(--t-m); line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; }
.tile-body { grid-column: 7 / 13; color: var(--ink); }
@media (max-width: 760px) {
  .board { grid-template-columns: 1fr 1fr; grid-template-rows: 46svh 44vw auto; gap: 6px; padding: 6px; }
  .tile-a { grid-column: 1 / 3; grid-row: 1; }
  .tile-b { grid-column: 1; grid-row: 2; padding: 14px; }
  .tile-note { font-size: var(--t-s); }
  .tile-c { grid-column: 2; grid-row: 2; }
  .tile-text { grid-column: 1 / 3; grid-row: 3; display: block; padding: 28px 20px; }
  .tile-statement { margin-bottom: 20px; }
}

/* ---------- El origen de Lumi ---------- */
.origin { background: var(--paper); padding: var(--gap-section) 0 0; display: grid; grid-template-columns: repeat(12, 1fr); }
.origin-photo { grid-column: 1 / 9; grid-row: 1; height: min(78svh, 760px); background: #222; }
.origin-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.origin-side { grid-column: 9 / 13; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; padding: 0 var(--m); }
.origin-cut { object-fit: cover; }
.origin-cut-1 { width: min(100%, 340px); aspect-ratio: 1; clip-path: circle(48% at 50% 50%); transform: rotate(-5deg); }
.origin-cut-2 { width: min(60%, 200px); aspect-ratio: 3 / 4; object-position: 50% 30%; clip-path: inset(0 round 999px 999px 0 0); transform: rotate(4deg); margin-left: 30%; }
.origin-bar {
  grid-column: 4 / 13; grid-row: 2; margin-top: -18svh; position: relative; z-index: 3;
  background: var(--sun); color: var(--night); padding: clamp(32px, 4vw, 64px); display: flex; gap: 24px; align-items: flex-end;
}
.origin-text { flex: 1; max-width: 62ch; }
.origin-text h2 { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.origin-text blockquote { margin: 28px 0 0; font-size: var(--t-m); font-weight: 700; line-height: 1.3; max-width: 30ch; }
.origin-text cite { display: block; font-style: normal; font-size: var(--t-b); font-weight: 500; margin-top: 6px; }
.origin-text p { margin-top: 20px; }
.origin-lumi svg { width: clamp(150px, 16vw, 240px); height: auto; }
@media (max-width: 760px) {
  .origin { display: block; padding-top: 72px; }
  .origin-photo { height: 58svh; }
  .origin-side { display: none; }
  .origin-bar { margin: -12svh 12px 0; flex-direction: column; align-items: flex-start; padding: 28px 20px; }
  .origin-lumi { align-self: flex-end; margin-top: -12px; }
  .origin-lumi svg { width: 150px; }
}

/* ---------- Pregúntale a Lumi ---------- */
.ask {
  --field: var(--pine);
  min-height: 92svh; background: var(--field); color: var(--paper); margin-top: var(--gap-section);
  padding: clamp(80px, 10svh, 120px) var(--m) clamp(48px, 8svh, 96px);
  display: grid; grid-template-columns: repeat(12, 1fr); align-content: start; gap: 40px 24px;
  transition: background-color 300ms ease;
}
.ask[data-field='1'] { --field: var(--night); }
.ask[data-field='2'] { --field: var(--amber); }
.ask-head { grid-column: 1 / 7; }
.ask-head h2 { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.ask-head p { margin-top: 16px; max-width: 44ch; }
.ask-ui { grid-column: 1 / 13; }
.ask-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; background: rgb(0 0 0 / 0.22); padding: 6px; }
.ask-seg button {
  font: 800 var(--t-m)/1.1 var(--font); letter-spacing: -0.02em; color: var(--paper); background: transparent;
  border: 0; padding: 0.7em 1em; min-height: 56px; cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.ask-seg button:active { transform: scale(0.97); }
.ask-seg button[aria-selected='true'] { background: var(--honey); color: var(--night); }
@media (hover: hover) and (pointer: fine) { .ask-seg button[aria-selected='false']:hover { background: rgb(255 255 255 / 0.14); } }
.ask-answer { margin-top: 36px; display: flex; align-items: flex-end; gap: 16px; max-width: 980px; }
.ask-lumi { position: relative; width: clamp(130px, 15vw, 210px); flex: none; }
.ask-lumi svg { width: 100%; height: auto; }
.lumi-pose-busca { display: none; }
.ask.is-searching .lumi-pose-busca { display: block; }
.ask.is-searching .lumi-pose-lista { display: none; }
.ask-bubbles { flex: 1; }
.ask-bubble { background: var(--paper); color: var(--night); padding: clamp(20px, 2.4vw, 32px); font-size: var(--t-m); line-height: 1.32; font-weight: 500; border-radius: 28px 28px 28px 6px; }
.ask-bubble b { font-weight: 800; }
.ask-more { margin-top: 12px; font-size: var(--t-b); font-weight: 700; color: var(--pine); }
.ask.is-searching .ask-bubble { opacity: 0; transform: translateY(12px); }
.ask-bubble { transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
@media (max-width: 760px) {
  .ask { display: block; min-height: 86svh; }
  .ask-seg { display: flex; flex-direction: column; width: 100%; margin-top: 28px; }
  .ask-seg button { text-align: left; }
  .ask-answer { flex-direction: column; align-items: stretch; }
  .ask-lumi { width: 120px; align-self: flex-start; margin-bottom: -18px; z-index: 1; }
}

/* ---------- Qué hace: el menú de órdenes ---------- */
.cmd { padding: var(--gap-section) var(--m); background: var(--paper); }
.cmd-search { display: block; width: min(100%, 1100px); }
.cmd-search input {
  width: 100%; height: 1.9em; font: 800 var(--t-m)/1 var(--font); letter-spacing: -0.02em;
  background: var(--paper-2); color: var(--ink); border: 0; padding: 0 0.7em; border-radius: 0;
}
.cmd-search input::placeholder { color: #5E574D; }
.cmd-list { margin-top: 28px; }
.cmd-list li {
  padding: 8px clamp(12px, 1.4vw, 24px); cursor: pointer; scroll-margin: 120px;
  transition: background-color 160ms ease, color 160ms ease;
}
.cmd-list li b { display: block; font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; }
.cmd-list li span { display: none; max-width: 60ch; margin: 10px 0 8px; font-size: var(--t-b); font-weight: 500; }
.cmd-list li[aria-selected='true'] { background: var(--sun); color: var(--night); }
.cmd-list li[aria-selected='true'] span { display: block; animation: cmdIn 220ms var(--ease-out); }
.cmd-list li[hidden] { display: none; }
@keyframes cmdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cmd-empty { margin-top: 24px; font-size: var(--t-m); font-weight: 700; }
@media (max-width: 760px) { .cmd-search input { height: 56px; } }

/* ---------- Cómo empezar: una sola barra ---------- */
.steps { background: var(--night); color: var(--paper); padding: var(--gap-section) var(--m); }
.steps h2 { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; margin-bottom: 64px; }
.steps-bar { display: flex; gap: 6px; min-height: 30svh; }
.seg { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 12%; }
.seg-time { font-size: var(--t-m); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.seg p { font-size: var(--t-b); line-height: 1.4; max-width: 26ch; }
.seg-1 { flex: 1 1 0; background: var(--honey); color: var(--night); }
.seg-2 { flex: 2 1 0; background: var(--sun); color: var(--night); }
.seg-3 { flex: 2.4 1 0; background: var(--pine); color: var(--paper); }
.seg-4 { flex: 5 1 0; background: var(--paper); color: var(--night); }
@media (max-width: 760px) {
  .steps h2 { margin-bottom: 36px; }
  .steps-bar { flex-direction: column; }
  .seg { flex: none; }
  .seg-1 { min-height: 110px; } .seg-2 { min-height: 140px; } .seg-3 { min-height: 160px; } .seg-4 { min-height: 220px; }
}

/* ---------- Precios: tres campos que se tocan ---------- */
.pricing { background: var(--paper); }
.plans { display: grid; grid-template-columns: 3.4fr 5fr 3.6fr; }
.plan { min-height: 86svh; padding: clamp(28px, 3vw, 48px); display: flex; flex-direction: column; gap: 18px; }
.plan h3 { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.plan-who { font-size: var(--t-m); line-height: 1.25; font-weight: 700; max-width: 22ch; }
.plan-inc { max-width: 40ch; }
.plan-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.plan-price { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; }
.plan-price small { display: block; font-size: var(--t-s); letter-spacing: 0; font-weight: 700; margin-top: 8px; }
.plan-a { background: var(--paper-2); color: var(--ink); }
.plan-b { background: var(--pine); color: var(--paper); }
.plan-c { background: var(--honey); color: var(--night); }
.plans-note { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; padding: var(--gap-section) var(--m) 0; }
.plans-note img { grid-column: 1 / 6; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(0 6%, 100% 0, 96% 100%, 3% 94%); }
.plans-note p { grid-column: 7 / 13; max-width: 58ch; }
@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan { min-height: 68svh; }
  .plan-b { order: -1; }
  .plan-foot .btn { width: 100%; }
  .plans-note { display: block; }
  .plans-note img { margin-bottom: 28px; }
}

/* ---------- Preguntas ---------- */
.faq { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; padding: var(--gap-section) var(--m); background: var(--paper); }
.faq h2 { grid-column: 1 / 5; align-self: start; position: sticky; top: 96px; font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; }
.faq-list { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--paper-2); border-radius: 28px; transition: background-color 200ms ease; }
.faq details[open] { background: var(--sun); color: var(--night); }
.faq summary { list-style: none; cursor: pointer; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; font-size: var(--t-b); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: var(--t-m); font-weight: 500; line-height: 1; transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 24px; max-width: 58ch; }
@media (max-width: 760px) {
  .faq { display: block; }
  .faq h2 { position: static; margin-bottom: 28px; }
  .faq summary { min-height: 64px; padding: 16px 20px; }
  .faq details p { padding: 0 20px 20px; }
}

/* ---------- Llamado: toda la franja es el enlace ---------- */
.cta {
  display: block; min-height: 64svh; background: var(--sun); color: var(--night); text-decoration: none; overflow: hidden;
  padding: clamp(24px, 3vw, 44px) var(--m) 24px; transition: background-color 160ms ease, color 160ms ease;
}
.cta-sentence { display: block; max-width: 34ch; font-size: var(--t-m); font-weight: 700; line-height: 1.25; }
.cta-arrow { position: absolute; top: clamp(24px, 3vw, 44px); right: var(--m); width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: square; transition: transform 200ms var(--ease-out); }
.cta-word { position: absolute; left: var(--m); bottom: 0; font-size: var(--t-xxl); font-weight: 800; letter-spacing: -0.06em; line-height: 0.78; white-space: nowrap; }
.cta-lumi { position: absolute; right: calc(var(--m) + 80px); top: clamp(24px, 3vw, 44px); }
.cta-lumi svg { width: clamp(120px, 15vw, 240px); height: auto; transform: rotate(6deg); }
.cta:hover, .cta:focus-visible { background: var(--night); color: var(--sun); }
.cta:hover .cta-arrow, .cta:focus-visible .cta-arrow { transform: translate(6px, -6px); }
@media (max-width: 760px) {
  .cta { min-height: 52svh; }
  .cta-sentence { max-width: 24ch; }
  .cta-arrow { width: 32px; height: 32px; }
  .cta-lumi { right: var(--m); top: auto; bottom: 30vw; }
  .cta-lumi svg { width: 104px; }
}

/* ---------- Cierre ---------- */
.foot { background: var(--night); color: var(--paper); overflow: hidden; padding: clamp(80px, 10vw, 140px) var(--m) 0; }
.foot-top { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: start; }
.foot-invite { grid-column: 1 / 7; }
.foot-line { font-size: var(--t-l); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; margin-bottom: 32px; max-width: 14ch; }
.foot-photo { grid-column: 7 / 10; transform: rotate(3deg); margin-right: 24px; }
.foot-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 78%; }
.foot-photo figcaption { margin-top: 12px; font-size: var(--t-s); transform: rotate(-3deg); }
.foot-links { grid-column: 10 / 13; display: flex; flex-direction: column; gap: 4px; }
.foot-links a { font-size: var(--t-s); font-weight: 600; text-decoration: none; display: inline-block; padding: 6px 0; }
.foot-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-legal { margin-top: clamp(64px, 8vw, 120px); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; font-size: var(--t-s); line-height: 1.5; }
.foot-legal p { max-width: 70ch; }
.credits a { text-underline-offset: 3px; }
.foot-word { font-size: var(--t-xxl); font-weight: 800; letter-spacing: -0.06em; line-height: 0.8; white-space: nowrap; color: var(--pine); transform: translateY(24%); margin-top: 24px; }
@media (max-width: 760px) {
  .foot-top { display: block; }
  .foot-invite .btn { width: 100%; }
  .foot-photo { width: 70%; margin: 48px 0 0 12%; }
  .foot-links { margin-top: 40px; flex-direction: row; flex-wrap: wrap; gap: 4px 18px; }
}

/* ---------- Entradas al hacer scroll ---------- */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-rise].in { opacity: 1; transform: none; }
.js .origin-cut[data-rise] { transform: translateY(24px) rotate(-5deg); }
.js .origin-cut[data-rise].in { transform: rotate(-5deg); }
.js .origin-cut-2[data-rise].in { transform: rotate(4deg); }

/* Lumi entra asomándose. */
.js .hero-lumi { animation: lumiPeek 900ms var(--ease-out) 500ms both; }
@keyframes lumiPeek { from { transform: translateX(80%) rotate(8deg); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-rise], .js .origin-cut[data-rise] { transform: none !important; transition: opacity 300ms ease; }
  .js .hero-lumi { animation: none; }
  .tile-video { display: none; }
  .tile-c { background: #000 url('/img/tres-llamas.webp') center / cover no-repeat; }
}
/*
 * Lumi en movimiento (LumiMark con `animated`). Ciclo de 4,8 s:
 *   0–8%   reposo · 8–20% la mano va a la espalda · 22% toma el objeto (escondido)
 *   24–40% lo saca y lo levanta · 40–72% el gesto · 72–86% lo guarda · 96% reposo
 * `.lm-back` / `.lm-front` son el mismo brazo detrás y delante del cuerpo; se
 * turnan justo cuando la mano cruza el borde, así nada aparece de la nada.
 * Con `.lumi-once` hace el ciclo una vez y se queda con el objeto en la mano.
 */
.lumi-a { --lm-io: cubic-bezier(0.77, 0, 0.175, 1); --lm-out: cubic-bezier(0.23, 1, 0.32, 1); }
.lumi-a .lm-blink { transform-box: fill-box; transform-origin: center; animation: lmBlink 4.8s infinite; }
@keyframes lmBlink { 0%, 44%, 47%, 100% { transform: scaleY(1); } 45.5% { transform: scaleY(0.1); } }
.lumi-a .lm-wave { transform-box: view-box; transform-origin: 152px 136px; animation: lmWave 2.6s var(--lm-io) 1; }
@keyframes lmWave { 0%, 55%, 100% { transform: rotate(0deg); } 11% { transform: rotate(-16deg); } 22% { transform: rotate(10deg); } 33% { transform: rotate(-16deg); } 44% { transform: rotate(4deg); } }

.lumi-a .lm-back { animation: lmBack 4.8s infinite; }
.lumi-a .lm-front { animation: lmFront 4.8s infinite; }
@keyframes lmBack { 0%, 9.9% { opacity: 0; } 10%, 30.9% { opacity: 1; } 31%, 75.9% { opacity: 0; } 76%, 90.9% { opacity: 1; } 91%, 100% { opacity: 0; } }
@keyframes lmFront { 0%, 9.9% { opacity: 1; } 10%, 30.9% { opacity: 0; } 31%, 75.9% { opacity: 1; } 76%, 90.9% { opacity: 0; } 91%, 100% { opacity: 1; } }
.lumi-a .lm-prop { animation: lmProp 4.8s infinite; }
@keyframes lmProp { 0%, 21.9% { opacity: 0; } 22%, 83.9% { opacity: 1; } 84%, 100% { opacity: 0; } }

/* Lupa: la saca por la derecha (ahí cambia de capa), se la pone en el ojo y mira. */
.lumi-a .lm-back-l { animation-name: lmBackL; }
.lumi-a .lm-front-l { animation-name: lmFrontL; }
@keyframes lmBackL { 0%, 10.9% { opacity: 0; } 11%, 30.9% { opacity: 1; } 31%, 77.9% { opacity: 0; } 78%, 92.9% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes lmFrontL { 0%, 10.9% { opacity: 1; } 11%, 30.9% { opacity: 0; } 31%, 77.9% { opacity: 1; } 78%, 92.9% { opacity: 0; } 93%, 100% { opacity: 1; } }
.lumi-a .lm-reach-lupa { transform-box: view-box; transform-origin: 154px 140px; animation: lmReachLupa 4.8s infinite; }
@keyframes lmReachLupa {
  0%, 8% { transform: rotate(-78deg); animation-timing-function: var(--lm-io); }
  20%, 24% { transform: rotate(60deg); animation-timing-function: var(--lm-out); }
  31% { transform: rotate(-130deg); animation-timing-function: var(--lm-out); }
  39% { transform: rotate(3deg); animation-timing-function: var(--lm-io); }
  42% { transform: rotate(0deg); animation-timing-function: var(--lm-io); }
  50% { transform: rotate(-5deg); animation-timing-function: var(--lm-io); }
  58% { transform: rotate(4deg); animation-timing-function: var(--lm-io); }
  65% { transform: rotate(-3deg); animation-timing-function: var(--lm-io); }
  69% { transform: rotate(0deg); animation-timing-function: var(--lm-io); }
  77% { transform: rotate(-130deg); animation-timing-function: var(--lm-io); }
  84%, 86% { transform: rotate(60deg); animation-timing-function: var(--lm-io); }
  96%, 100% { transform: rotate(-78deg); }
}
.lumi-a .lm-lupa-eye { animation: lmLupaEye 4.8s infinite; }
.lumi-a .lm-lupa-eye-off { animation: lmLupaEyeOff 4.8s infinite; }
@keyframes lmLupaEye { 0%, 37% { opacity: 0; } 40%, 69% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes lmLupaEyeOff { 0%, 37% { opacity: 1; } 40%, 69% { opacity: 0; } 72%, 100% { opacity: 1; } }

/* Calendario: lo levanta y marca el día. */
.lumi-a .lm-reach-cal { transform-box: view-box; transform-origin: 154px 136px; animation: lmReachCal 4.8s infinite; }
@keyframes lmReachCal {
  0%, 8% { transform: rotate(130deg); animation-timing-function: var(--lm-io); }
  20%, 24% { transform: rotate(220deg); animation-timing-function: var(--lm-out); }
  36% { transform: rotate(-6deg); animation-timing-function: var(--lm-io); }
  40%, 72% { transform: rotate(0deg); animation-timing-function: var(--lm-io); }
  82%, 86% { transform: rotate(220deg); animation-timing-function: var(--lm-io); }
  96%, 100% { transform: rotate(130deg); }
}
.lumi-a .lm-mark { transform-box: fill-box; transform-origin: center; animation: lmMark 4.8s infinite; }
@keyframes lmMark { 0%, 46% { transform: scale(0.6); opacity: 0; animation-timing-function: var(--lm-out); } 52%, 100% { transform: scale(1); opacity: 1; } }
.lumi-a .lm-check { stroke-dasharray: 1; animation: lmCheck 4.8s infinite; }
@keyframes lmCheck { 0%, 52% { stroke-dashoffset: 1; animation-timing-function: var(--lm-out); } 60%, 100% { stroke-dashoffset: 0; } }

/* Libro, con las dos manos: sale por debajo del cuerpo, sube, se abre y pasa la página. */
.lumi-a .lm-arm-l { transform-box: view-box; transform-origin: 46px 142px; animation: lmArmL 4.8s infinite; }
.lumi-a .lm-arm-r { transform-box: view-box; transform-origin: 154px 142px; animation: lmArmR 4.8s infinite; }
@keyframes lmArmL {
  0%, 8% { transform: rotate(60deg); animation-timing-function: var(--lm-io); }
  20%, 24% { transform: rotate(-100deg); animation-timing-function: var(--lm-io); }
  32% { transform: rotate(30deg); animation-timing-function: var(--lm-out); }
  40%, 72% { transform: rotate(0deg); animation-timing-function: var(--lm-io); }
  78% { transform: rotate(30deg); animation-timing-function: var(--lm-io); }
  84%, 86% { transform: rotate(-100deg); animation-timing-function: var(--lm-io); }
  96%, 100% { transform: rotate(60deg); }
}
@keyframes lmArmR {
  0%, 8% { transform: rotate(-60deg); animation-timing-function: var(--lm-io); }
  20%, 24% { transform: rotate(100deg); animation-timing-function: var(--lm-io); }
  32% { transform: rotate(-30deg); animation-timing-function: var(--lm-out); }
  40%, 72% { transform: rotate(0deg); animation-timing-function: var(--lm-io); }
  78% { transform: rotate(-30deg); animation-timing-function: var(--lm-io); }
  84%, 86% { transform: rotate(100deg); animation-timing-function: var(--lm-io); }
  96%, 100% { transform: rotate(-60deg); }
}
.lumi-a .lm-book-move { animation: lmBookMove 4.8s infinite; }
@keyframes lmBookMove {
  0%, 22% { transform: translateY(-34px); animation-timing-function: var(--lm-io); }
  30% { transform: translateY(38px); animation-timing-function: var(--lm-out); }
  40%, 72% { transform: translateY(0); animation-timing-function: var(--lm-io); }
  80% { transform: translateY(38px); animation-timing-function: var(--lm-io); }
  86%, 100% { transform: translateY(-34px); }
}
.lumi-a .lm-book-back { animation: lmBookBack 4.8s infinite; }
.lumi-a .lm-book-front { animation: lmBookFront 4.8s infinite; }
@keyframes lmBookBack { 0%, 21.9% { opacity: 0; } 22%, 30.9% { opacity: 1; } 31%, 79.9% { opacity: 0; } 80%, 85.9% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes lmBookFront { 0%, 30.9% { opacity: 0; } 31%, 79.9% { opacity: 1; } 80%, 100% { opacity: 0; } }
.lumi-a .lm-page-l { transform-box: fill-box; transform-origin: right center; animation: lmPage 4.8s infinite; }
.lumi-a .lm-page-r { transform-box: fill-box; transform-origin: left center; animation: lmPage 4.8s infinite; }
@keyframes lmPage { 0%, 40% { transform: scaleX(0.05); animation-timing-function: var(--lm-out); } 48%, 70% { transform: scaleX(1); animation-timing-function: var(--lm-io); } 76%, 100% { transform: scaleX(0.05); } }
.lumi-a .lm-flip { transform-box: fill-box; transform-origin: left center; animation: lmFlip 4.8s infinite; }
@keyframes lmFlip { 0%, 54% { opacity: 0; transform: scaleX(1); } 56% { opacity: 1; transform: scaleX(1); animation-timing-function: var(--lm-io); } 64% { opacity: 1; transform: scaleX(-1); } 66%, 100% { opacity: 0; transform: scaleX(-1); } }
.lumi-a .lm-eyes-read { animation: lmEyesRead 4.8s infinite; }
.lumi-a .lm-eyes-open { animation: lmEyesOpen 4.8s infinite; }
@keyframes lmEyesRead { 0%, 36% { opacity: 0; } 40%, 74% { opacity: 1; } 78%, 100% { opacity: 0; } }
@keyframes lmEyesOpen { 0%, 36% { opacity: 1; } 40%, 74% { opacity: 0; } 78%, 100% { opacity: 1; } }

/* Pensando: la mano sube a la barbilla y aparecen los puntitos, uno tras otro. */
.lumi-a .lm-chin { transform-box: view-box; transform-origin: 154px 144px; animation: lmChin 4.8s infinite; }
@keyframes lmChin { 0%, 6% { transform: rotate(-70deg); animation-timing-function: var(--lm-out); } 20%, 84% { transform: rotate(0deg); animation-timing-function: var(--lm-io); } 96%, 100% { transform: rotate(-70deg); } }
.lumi-a .lm-dot { transform-box: fill-box; transform-origin: center; animation: lmDot 4.8s infinite; }
.lumi-a .lm-dot2 { animation-name: lmDot2; }
.lumi-a .lm-dot3 { animation-name: lmDot3; }
@keyframes lmDot { 0%, 22% { opacity: 0; transform: scale(0.6); } 28%, 80% { opacity: 1; transform: scale(1); } 86%, 100% { opacity: 0; } }
@keyframes lmDot2 { 0%, 28% { opacity: 0; transform: scale(0.6); } 34%, 80% { opacity: 1; transform: scale(1); } 86%, 100% { opacity: 0; } }
@keyframes lmDot3 { 0%, 34% { opacity: 0; transform: scale(0.6); } 40%, 80% { opacity: 1; transform: scale(1); } 86%, 100% { opacity: 0; } }

/* Una sola vez: se detiene al 62 % del ciclo, con el objeto en la mano y el día marcado. */
.lumi-once *:not(.lm-blink) { animation-iteration-count: 0.62 !important; animation-fill-mode: forwards !important; }
.lumi-once .lm-wave { animation-iteration-count: 1 !important; }

/* Reducir movimiento: quieta en la pose final, con el objeto en la mano. */
@media (prefers-reduced-motion: reduce) {
  .lumi-a, .lumi-a * { animation: none !important; }