/* Portada: clara, de bloques de color. Los colores salen de la paleta (public/palette.css): aquí solo se les da nombre corto. */
:root {
  --ink: var(--c-ink);          /* tinta fija: texto sobre los bloques de color y las tarjetas */
  --fg: var(--c-fg);
  --text: var(--fg);
  --bg: var(--c-bg);
  --field: var(--c-field);
  --card: var(--c-card);
  --muted: var(--c-muted);
  --muted-on: var(--c-ink-muted);
  --lilac: var(--c-tint);
  --steps: var(--c-strong);
  --shadow: var(--c-shadow);
  --coral: var(--c-cta);
  --coral-dark: var(--c-cta-hover);
  --y: var(--c-b1);
  --m: var(--c-b2);
  --b: var(--c-b3);
  --p: var(--c-b4);
  --r-xl: 32px;
  --buddy-size: 54px;
  --perch: var(--logo);           /* el logo con el nombre, como en la app (theme.css) */
  --top-h: 72px;
  --wrap: 1240px;                  /* ancho de la cabecera, las secciones alineadas a la izquierda y el pie */
  --gutter: clamp(18px, 4vw, 44px); /* su margen a los lados */
  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}
/* Ventana de acceso (auth.css) en oscuro */
:root[data-theme="dark"] { --panel: var(--c-tint); --border: var(--c-line); }
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; color: var(--fg); background: var(--bg); font: 500 17px/1.5 "Figtree", var(--font); -webkit-font-smoothing: antialiased; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--font); margin: 0; text-wrap: balance; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; border-radius: 8px; }

/* Bandas de color de borde a borde: el fondo se pinta con border-image hacia los lados, sin tocar el ancho del contenido ni recortar nada */
.top, .hero, .steps, .dhero, .dcta { border-image: linear-gradient(var(--band) 0 0) fill 0 / / 0 100vmax; }
.top, .hero, .dhero { --band: var(--lilac); }
.steps, .dcta { --band: var(--steps); }

/* Barra superior */
.top { --top-gap: 22px; display: flex; align-items: center; gap: var(--top-gap); max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter); }
/* El icono de la app junto al nombre, con la mascota dentro (sin verse): public/site.js la saca por la estrella y la vuelve a meter */
.perch { --buddy-size: var(--perch); position: relative; z-index: 5; flex: none; display: flex; width: var(--perch); height: var(--perch); margin-right: calc(var(--logo-gap) - var(--top-gap)); /* --logo-gap hasta el nombre, como en la app */ }
.perch-ic { display: block; width: 100%; height: 100%; }
.perch > .buddy { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.brand { margin-right: auto; font: 800 var(--logo-text)/1 var(--font); letter-spacing: -.04em; text-decoration: none; }
.top-nav { display: flex; align-items: center; gap: 22px; }
.nl { font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.nl:hover { text-decoration: underline; text-underline-offset: 4px; }
.go {
  display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--coral); color: var(--ink); font: 700 16px/1 "Figtree", var(--font); text-decoration: none; white-space: nowrap;
  transition: transform .12s, background .12s;
}
.go:hover:not(:disabled) { background: var(--coral-dark); transform: translateY(-1px); }

/* Bloque principal */
.hero {
  /* con la cabecera, al menos el alto de la pantalla; el contenido, centrado en vertical */
  min-height: calc(100vh - var(--top-h)); min-height: calc(100svh - var(--top-h)); align-content: center;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(18px, 2.4vw, 28px); text-align: center; container-type: inline-size;
  max-width: 1200px; margin: 0 auto; padding: clamp(16px, 3vw, 36px) clamp(20px, 5vw, 64px) clamp(16px, 3vw, 40px);
}
h1 { white-space: nowrap; font-size: min(6.6cqi, 74px); font-weight: 800; line-height: .98; letter-spacing: -.045em; }
h1 em { display: inline-block; color: var(--ink); white-space: nowrap; margin-top: .06em; padding: 0 .14em .05em; font-style: normal; background: var(--coral); border-radius: .22em; transform: rotate(-2deg); }
.hero-copy { display: grid; justify-items: center; width: 100%; }
.lead { margin: 0 0 calc(var(--buddy-size) + 8px); max-width: 48ch; font-size: clamp(19px, 2vw, 25px); line-height: 1.35; color: var(--muted); text-wrap: balance; }
.alert { margin: 0 0 16px; padding: 10px 14px; border-radius: 14px; background: #ffd9d2; color: var(--ink); font-size: 15px; }

.idea { position: relative; width: 100%; text-align: left; display: flex; align-items: flex-end; gap: 8px; max-width: 940px; padding: 10px 10px 10px 26px; background: var(--field); border-radius: 32px; }
.rider { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); z-index: 3; display: flex; padding-left: 26px; pointer-events: none; }
.rider .buddy { pointer-events: auto; }
.idea:focus-within { outline: 3px solid var(--coral); outline-offset: 3px; }
.idea textarea { flex: 1; min-width: 0; min-height: 56px; max-height: 180px; padding: 15px 0; border: 0; outline: none; resize: none; background: transparent; color: var(--fg); font: 500 19px/1.4 "Figtree", var(--font); }
.idea textarea::placeholder { color: var(--muted); opacity: .85; }
.go { flex: none; height: 56px; padding: 0 28px; font-size: 18px; }
.idea.nudge { animation: nudge .38s; }
@keyframes nudge { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
/* Categorías bajo la caja: la marcada es la de la demo que pasa por el centro de la cinta */
.cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.cat { flex: none; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--fg) 8%, transparent); color: var(--fg); font: 700 15px/1 "Figtree", var(--font); cursor: pointer; transition: background .5s, color .5s; } /* (sin borde: se separan por su fondo, como las pestañas de ideas de «Nuevo proyecto») */
@media (hover: hover) { .cat:not([aria-pressed="true"], [aria-current="page"]):hover { background: color-mix(in srgb, var(--fg) 15%, transparent); } }
.cat[aria-pressed="true"], .cat[aria-current="page"] { background: var(--fg); color: var(--bg); }
/* En el móvil, en una sola fila que se desliza de borde a borde (como en «Nuevo proyecto»), en vez de partirse en dos líneas */
@media (max-width: 760px) {
  .cats { --gut: clamp(20px, 5vw, 64px); flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; box-sizing: border-box; width: calc(100% + 2 * var(--gut)); margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
  .cats::-webkit-scrollbar { display: none; }
}

/* Cinta de demos: de borde a borde, avanza sola hacia la izquierda sin fin (site.js); sin script, se desliza a mano */
html, body { overflow-x: clip; }
.reel { width: 100vw; margin-top: clamp(4px, 1vw, 12px); overflow-x: auto; scrollbar-width: none; text-align: left; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel::-webkit-scrollbar { display: none; }
.reel.moving { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.reel.dragging { cursor: grabbing; }
.reel.dragging .tile { pointer-events: none; }
.reel-track { display: flex; align-items: flex-start; gap: 22px; width: max-content; padding: 26px 18px 40px; }
.k1 { --c: var(--y); }
.k2 { --c: var(--m); }
.k3 { --c: var(--b); }
.k4 { --c: var(--p); }
/* Ficha: marco blanco con la mini web dentro y, debajo, el nombre y la categoría; inclinada a su manera (--tilt), se endereza al pasar */
.tile { flex: none; width: clamp(176px, 46vw, 224px); padding: 10px 10px 12px; border-radius: 24px; background: var(--card); box-shadow: 0 22px 34px -22px var(--shadow); text-decoration: none; transform: rotate(var(--tilt, 0deg)); transition: transform .3s ease; }
.tile:hover, .tile:focus-visible { transform: rotate(0deg) translateY(-6px); }
.tile-face { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; aspect-ratio: 1; padding: 14px; border-radius: 16px; background: var(--c); overflow: hidden; }
.tile-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tf-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.tf-top small { overflow: hidden; font: 700 12px/1.1 "Figtree", var(--font); white-space: nowrap; text-overflow: ellipsis; }
.tf-nav { display: flex; flex: none; gap: 5px; }
.tf-nav i { width: 18px; height: 5px; border-radius: 3px; background: rgba(28, 22, 49, .3); }
.tile-face b { font: 800 23px/1.05 var(--font); letter-spacing: -.03em; }
.tile-face .act { display: inline-block; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 12px/1 "Figtree", var(--font); }
.tile-face .act::first-letter { text-transform: uppercase; }
.tile-face .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: auto; }
.tile-face .row i { height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .65); }
.tile-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 4px 0; }
.tile-cap > span { overflow: hidden; font: 700 14px/1.2 "Figtree", var(--font); white-space: nowrap; text-overflow: ellipsis; }
.tile-cap em { display: inline-flex; flex: none; align-items: center; gap: 5px; color: var(--muted); font: 700 10px/1 "Figtree", var(--font); font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
.spark { width: 12px; height: 12px; fill: color-mix(in srgb, var(--c) 80%, var(--ink)); }

/* Demos (pages/gallery.js): cabecera sobre el color de los bloques con las categorías (enlaces), una sección por categoría con sus
   fichas en rejilla (la descripción debajo) y, al final, la banda oscura con «Crear la mía» */
a.cat { display: inline-flex; align-items: center; text-decoration: none; }
.dhero { display: grid; justify-items: center; gap: clamp(14px, 2vw, 22px); max-width: 1200px; margin: 0 auto; padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 64px) clamp(36px, 6vw, 64px); text-align: center; container-type: inline-size; }
.dhero .lead { margin: 0; }
.dhero .cats { margin-top: 6px; }
.demo-sec { max-width: var(--wrap); margin: 0 auto; padding: clamp(44px, 6vw, 72px) var(--gutter) 0; }
.demo-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.demo-sec-head h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.035em; }
.demo-sec-head h2 a { text-decoration: none; }
.demo-sec-head h2 a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.demo-sec-head p { flex: 1 1 320px; margin: 0; color: var(--muted); font-size: 17px; }
.demo-sec-head .more { margin-left: auto; font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; }
.demo-sec-head .more:hover { text-decoration: underline; text-underline-offset: 4px; }
.demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 40vw, 210px), 1fr)); gap: clamp(26px, 3vw, 38px) clamp(16px, 2.4vw, 28px); margin-top: clamp(22px, 3vw, 34px); }
.demo-grid .tile { width: auto; }
.demo-grid .tile-cap em { display: none; } /* (ya están agrupadas por categoría) */
.tile-desc { display: block; padding: 6px 4px 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.dcta { display: grid; justify-items: center; gap: 14px; max-width: 1200px; margin: clamp(64px, 9vw, 112px) auto 0; padding: clamp(48px, 7vw, 88px) clamp(22px, 5vw, 64px); color: var(--c-on-strong); text-align: center; }
.dcta h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -.04em; }
.dcta p { margin: 0 0 8px; max-width: 40ch; font-size: clamp(18px, 1.8vw, 22px); opacity: .85; }
.dcta .go { height: 56px; padding: 0 30px; font-size: 18px; }

/* Pasos */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); max-width: 1200px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) clamp(22px, 5vw, 64px); color: var(--c-on-strong); }
.step { display: grid; gap: 8px; align-content: start; }
.step .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-on-strong); color: var(--ink); font: 800 15px/1 var(--font); }
.step h3 { margin-top: 10px; font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em; }
.step p { margin: 0; max-width: 28ch; font-size: clamp(17px, 1.6vw, 19px); opacity: .85; }

/* Planes (las tarjetas son las de /plans: components/plans.js) y preguntas frecuentes: títulos grandes y centrados */
.plans, .faq { --pad: clamp(64px, 9vw, 112px); max-width: 1200px; margin: 0 auto; padding: var(--pad) clamp(18px, 4vw, 44px) 0; scroll-margin-top: calc(28px - var(--pad)); }
.plans h2, .faq h2 { font-size: clamp(36px, 5.6vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; text-align: center; }
.sec-lead { max-width: 44ch; margin: 16px auto 0; color: var(--muted); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.4; text-align: center; text-wrap: balance; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 52px); }
.tile, .plan { --muted: var(--muted-on); color: var(--ink); }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 28px; background: var(--c); }
.plan:nth-child(1) { --c: var(--b); }
.plan:nth-child(2) { --c: var(--y); }
.plan:nth-child(3) { --c: var(--m); }
.plan h3 { margin: 0; font: 700 14px/1 "Figtree", var(--font); letter-spacing: .1em; text-transform: uppercase; }
.plan .price { margin: 14px 0 20px; font: 800 clamp(44px, 4.4vw, 56px)/1 var(--font); letter-spacing: -.04em; }
.plan .price small { margin-left: 6px; font: 600 16px/1 "Figtree", var(--font); letter-spacing: 0; color: var(--muted); }
.plan .ribbon { position: absolute; top: 22px; right: 22px; padding: 7px 12px; border-radius: 999px; background: var(--coral); color: var(--ink); font: 700 12px/1 "Figtree", var(--font); transform: rotate(3deg); }
.plan-body { display: flex; flex: 1; flex-direction: column; }
.plan ul { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.plan li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.4; }
@media (min-width: 861px) and (max-width: 1180px) { .plan { padding-inline: 20px; } .plan li { font-size: 14px; } }
.plan li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; }
.plan .soon-h { margin: 0 0 8px; color: var(--muted); font: 700 12px/1 "Figtree", var(--font); letter-spacing: .08em; text-transform: uppercase; }
.plan .soon-list li { color: var(--muted); }
.plan .soon-list li::before { content: "+"; }
.plan-action { display: grid; gap: 10px; margin-top: auto; }
.plan-action form { margin: 0; }
.plan-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 16px/1 "Figtree", var(--font); text-decoration: none; cursor: pointer; }
.plan.popular .plan-btn { background: var(--coral); color: var(--ink); }
.plan-btn:disabled { opacity: .5; cursor: default; }
.plan-link { width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: 600 14px "Figtree", var(--font); text-decoration: underline; cursor: pointer; }
.plans-note { margin: 22px auto 0; max-width: 60ch; color: var(--muted); font-size: 15px; text-align: center; }

.faq { padding-bottom: clamp(64px, 9vw, 112px); }
.faq-list { max-width: 820px; margin: clamp(28px, 4vw, 48px) auto 0; }
.faq details { border-bottom: 1.5px solid color-mix(in srgb, var(--fg) 14%, transparent); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 2px; font: 700 clamp(19px, 2vw, 23px)/1.25 var(--font); letter-spacing: -.02em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lilac); font: 700 22px/1 "Figtree", var(--font); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 64ch; margin: 0 2px 24px; color: var(--muted); font-size: 18px; line-height: 1.5; }

/* Pie */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: var(--wrap); margin: 0 auto; padding: clamp(32px, 5vw, 56px) var(--gutter) 36px; font-size: 14px; color: var(--muted); }
.foot-brand { margin-right: auto; color: var(--fg); font: 800 21px/1 var(--font); letter-spacing: -.04em; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--fg); text-decoration: underline; }

@media (max-width: 860px) {
  h1 { white-space: normal; font-size: clamp(40px, 9vw, 64px); }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  :root { --buddy-size: 46px; --top-h: 66px; }
  .top { --top-gap: 8px; }
  .nl { font-size: 14px; }
  .plan { padding-inline: 20px; }
  .plan li { font-size: 15px; }
  .idea { flex-direction: column; align-items: stretch; padding: 8px 8px 8px 18px; }
  .rider { padding-left: 18px; }
  .idea textarea { min-height: 92px; padding: 10px 0; font-size: 17px; }
  .go { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } }
.play-go { gap: 10px; height: 52px; margin-top: 4px; padding: 0 24px; font-size: 17px; }
.play-go svg { width: 18px; height: 18px; }