/* dearyou · pedido híbrido. Tokens y componentes de la especificación (2026-09-17), pensados para 390 × 844 px. */
:root {
  --plum-900: #1A0F24; --plum-800: #241432; --plum-700: #33203F;
  --cream: #F8F1E7; --muted: #BCA8C9; --placeholder: #A893B6;
  --coral: #FF5E87; --coral-deep: #E8456F; --gold: #F0C969; --gold-soft: #E8B94F;
  --paper: #FAF7F1;
  --borde: rgba(248, 241, 231, .14); --borde-fuerte: rgba(248, 241, 231, .24);
  --r-tarjeta: 18px; --r-campo: 14px; --r-dock: 24px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--plum-900); color: var(--cream);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.45;
  /* el dock se queda SIEMPRE abajo y lo que se desplaza es la conversación: en el resumen (pantalla 10) el
     botón de pagar tiene que verse sin hacer scroll en un móvil de 844 px (spec). */
  height: 100svh; overflow: hidden; display: flex; flex-direction: column;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── cabecera ─────────────────────────────────────────────────────────── */
/* como el lienzo: 8px a la izquierda (volver), 12px a la derecha, y la barra y «Paso N de 10» en una fila */
#cabecera { position: sticky; top: 0; z-index: 5; background: var(--plum-900); padding: 10px 12px 12px 8px;
  display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid rgba(248, 241, 231, .10); }
.barra-sup { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; color: var(--cream); }
.icono[hidden] { visibility: hidden; }
.chip-borde[hidden] { display: inline-flex; visibility: hidden; }   /* guarda su sitio: el logo sigue centrado */
.logo { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 22px; margin: 0; letter-spacing: -.3px; }
.logo span { color: var(--coral); }
.chip-borde { height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(248, 241, 231, .20); border-radius: 999px; font-size: 14px; font-weight: 600; }
.fila-progreso { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.fila-progreso[hidden] { display: none; }
.progreso { flex: 1; height: 6px; background: var(--plum-700); border-radius: 999px; overflow: hidden; }
#progreso-relleno { height: 100%; width: 0; background: var(--coral); border-radius: 999px; transition: width .3s ease; }
.paso-n { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ── conversación ─────────────────────────────────────────────────────── */
/* Pegada abajo, como un chat, SIN `justify-content: flex-end`: con él, lo que no cabía se salía POR ARRIBA y el scroll
   no llegaba (28/09, paso 4 en móviles reales: la tarjeta sin cara y, en un Android, sin poder subir). El
   `margin-top: auto` del primero hace lo mismo cuando cabe y, cuando no, deja que desborde por abajo, donde sí hay scroll. */
#conversacion { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 8px 16px 12px; }
#conversacion > :first-child { margin-top: auto; }
.fila-bot { display: flex; gap: 8px; align-items: flex-end; max-width: 320px; }
.pila-bot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 999px; background: var(--coral); color: var(--plum-900);
  display: grid; place-items: center; font-family: Fraunces, serif; font-weight: 900; flex: 0 0 auto; }
.burbuja-bot { background: var(--plum-700); border-radius: var(--r-tarjeta) var(--r-tarjeta) var(--r-tarjeta) 6px;
  padding: 10px 14px; max-width: 320px; }
.fila-cliente { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
/* «Cambiar» junto a la respuesta anterior (lienzo): lápiz, gris, 44px de zona táctil. El del resumen es otro (.cambiar) */
.cambiar-resp { min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.burbuja-cliente { background: var(--coral); color: var(--plum-900); font-weight: 600;
  border-radius: var(--r-tarjeta) var(--r-tarjeta) 6px var(--r-tarjeta); padding: 10px 14px; max-width: 280px; }
.cambiar { color: var(--gold); font-size: 14px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.burbuja-bot strong, .burbuja-cliente strong { font-weight: 700; }
/* cargando (lienzo): tres puntos dorados de 8px que botan */
.puntos { display: inline-flex; gap: 5px; margin-right: 8px; vertical-align: middle; }
.puntos span { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--gold);
  animation: bote 1s infinite ease-in-out; }
.puntos span:nth-child(2) { animation-delay: .15s; } .puntos span:nth-child(3) { animation-delay: .3s; }
@keyframes bote { 0%, 60%, 100% { transform: translateY(0) } 30% { transform: translateY(-4px) } }
@media (prefers-reduced-motion: reduce) { .puntos span { animation: none; } }
.mini-foto { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.mini-foto.borrosa { filter: blur(10px) brightness(.6); }

/* ── dock ─────────────────────────────────────────────────────────────── */
#dock { background: var(--plum-800); border-radius: var(--r-dock) var(--r-dock) 0 0; border-top: 1px solid rgba(248, 241, 231, .10);
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; flex: 0 1 auto; max-height: 62svh; overflow-y: auto; }
#dock > .opciones, #dock > .dock-cuerpo > .opciones { gap: 14px; }
#dock[hidden] { display: none; }
/* dock con PIE (paso 7, Isaac 28/09): «Seguir» siempre a la vista y lo de encima se desplaza DENTRO del dock. Sin tope
   de alto: lo de arriba, la conversación, es lo menos relevante aquí y se queda con lo que sobre (en un iPhone SE,
   nada: con un tope quedaba una tira cortada de burbuja) */
#dock.con-pie { overflow: hidden; max-height: none; }
#dock.con-pie > .dock-cuerpo { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: -4px -16px 0; padding: 4px 16px 4px; }   /* el margen negativo deja sitio al anillo de foco y al borde dorado */
#dock.con-pie > .principal { flex: 0 0 auto; }
/* y la conversación, sin relleno (el aire va en márgenes, DENTRO de lo que se desplaza): cuando el dock se lo come
   todo, el relleno de 20 px dejaba asomar una tira cortada de burbuja */
#conversacion.sobre-pie { padding-top: 0; padding-bottom: 0; }
#conversacion.sobre-pie > :last-child { margin-bottom: 12px; }
#conversacion.sobre-pie.mini > * { visibility: hidden; }   /* menos de 48 px: nada, mejor que una tira (ver app.js) */
/* ...y entonces la pregunta del paso sube al dock como título, pegada arriba al desplazar (paso 7, Isaac 28/09). No
   oscila: enseñarla encoge aún más la conversación, y quitarla la agranda */
.pregunta-dock { display: none; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
#conversacion.sobre-pie.mini + #dock .pregunta-dock { display: block; position: sticky; top: 0; z-index: 1;
  background: var(--plum-800); padding-bottom: 6px; }
.principal { min-height: 56px; background: var(--coral); color: var(--plum-900); font-size: 17px; font-weight: 700;
  border-radius: 999px; box-shadow: 0 12px 28px -12px rgba(255, 94, 135, .7); }
.principal:active { background: var(--coral-deep); }
.principal[disabled] { opacity: .4; box-shadow: none; cursor: default; }
.principal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.principal svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* 11 · pago recibido (artboard `Pagado` del lienzo): no es conversación, va centrada */
/* centrada con márgenes, no con `justify-content: center`, por lo mismo: centrar desborda también por arriba */
#conversacion.centrada > :last-child { margin-bottom: auto; }
/* el inicio se lee de arriba abajo */
#conversacion.arriba > :first-child { margin-top: 0; }
.pagado { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 16px 8px; }
.sello { width: 88px; height: 88px; border-radius: 999px; background: var(--gold); color: #2A1C06; flex: 0 0 auto;
  display: grid; place-items: center; box-shadow: 0 0 0 12px rgba(240, 201, 105, .14); }
.sello svg { width: 44px; height: 44px; stroke-width: 2.5; }
.sello.esperando { background: var(--plum-700); color: var(--gold); box-shadow: 0 0 0 12px rgba(240, 201, 105, .08); }
.pagado h1 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 34px; line-height: 1.1;
  letter-spacing: -.4px; text-align: center; text-wrap: balance; }
.pagado .sub { margin: 0; font-size: 17px; line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
.tarjeta-eta { width: 100%; box-sizing: border-box; background: var(--plum-800); border: 1px solid rgba(248, 241, 231, .10);
  border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.eta-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.eta-fila span:first-child { font-size: 14px; color: var(--muted); }
.eta-hora { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 28px; color: var(--gold);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.barra-eta { height: 8px; border-radius: 999px; background: var(--plum-700); overflow: hidden; }
.barra-eta div { height: 8px; border-radius: 999px; background: var(--gold); transition: width .6s ease; }
.eta-texto { font-size: 14px; line-height: 1.5; color: var(--cream); overflow-wrap: anywhere; }
.aviso-foto { width: 100%; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: 14px; background: var(--plum-900); border: 1px solid rgba(240, 201, 105, .30); font-size: 13.5px; line-height: 1.45; }
.aviso-foto svg { flex-shrink: 0; margin-top: 1px; color: var(--gold); }
.con-icono { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .barra-eta div { transition: none; } }


/* 13 · página de descarga (artboard `Descarga` del lienzo). Sin ofertas todavía. */
.descarga { width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 8px 0 12px; }
.descarga-cab { display: flex; flex-direction: column; gap: 8px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.descarga h1, .descarga-estado h1 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 32px;
  line-height: 1.05; letter-spacing: -.5px; text-wrap: balance; }
.descarga .sub, .descarga-estado .sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
/* position: relative: offsetLeft se mide desde el carrusel (ver el carrusel de temas, 26/09) */
.carrusel-descarga { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin: 0 -16px; padding: 4px calc(50% - 104px); }
/* el % del relleno es del PADRE, y el carrusel es 32 px más ancho (márgenes de −16): (padre + 32 − 240) / 2 = 50% − 104px.
   Con −120px la tarjeta quedaba 16 px a la izquierda del centro (medido a 375 y a 1280). */
.carrusel-descarga::-webkit-scrollbar { display: none; }
.version { position: relative; flex: 0 0 240px; aspect-ratio: 980 / 1880; padding: 0; border-radius: 16px;
  border: 3px solid transparent; overflow: hidden; scroll-snap-align: center; opacity: .5;
  transition: opacity .2s, border-color .2s; }
.version[aria-checked="true"] { border-color: var(--gold); opacity: 1; }
.version img { width: 100%; height: 100%; object-fit: contain; display: block; }
.version-n { position: absolute; left: 10px; top: 10px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: rgba(26, 15, 36, .82); color: var(--cream); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.fila-acciones { display: flex; gap: 10px; }
.fila-acciones > * { flex: 1 1 0; width: 100%; min-width: 0; }
.nav-version { display: flex; align-items: center; justify-content: center; gap: 10px; }
.puntos-version { display: flex; gap: 6px; align-items: center; }
.puntos-version span { width: 8px; height: 8px; border-radius: 999px; background: rgba(248, 241, 231, .30); transition: width .2s; }
.puntos-version span.activo { width: 22px; background: var(--gold); }
.descarga .enlace.con-icono { min-height: 44px; font-size: 15px; font-weight: 600; }
.descarga-estado { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 48px 8px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  display: flex; gap: 10px; align-items: center; background: var(--plum-700); border: 1px solid rgba(240, 201, 105, .4);
  border-radius: 16px; padding: 12px 16px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6); max-width: calc(100% - 32px);
  transition: opacity .5s; }
.toast svg { color: var(--gold); flex: 0 0 auto; }
.toast div { display: flex; flex-direction: column; font-size: 14px; }
.toast.fuera { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .version, .puntos-version span, .toast { transition: none; } }

/* aviso del pago: sólo ocupa sitio cuando hay algo que decir */
.aviso-pago:empty { display: none; }
.aviso-pago { display: flex; flex-direction: column; gap: 8px; }
.aviso-pago p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--cream);
  background: rgba(255, 94, 135, .12); border: 1px solid rgba(255, 94, 135, .4); border-radius: var(--r-campo); padding: 10px 12px; }
.secundario { min-height: 52px; border: 1px solid var(--borde-fuerte); border-radius: 999px; color: var(--cream);
  font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.enlace { color: var(--gold); text-decoration: none; font-size: 15px; text-align: center; }
.enlace:hover { color: var(--gold-soft); }
label.etiqueta { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }
.campo { width: 100%; height: 52px; background: var(--plum-700); border: 1px solid rgba(248, 241, 231, .18);
  border-radius: var(--r-campo); color: var(--cream); font-size: 17px; padding: 0 16px; }
.campo::placeholder { color: var(--placeholder); }
.campo:focus { border-color: var(--gold); outline: none; }
.campo.ok { border-color: var(--gold); }
.contador { font-size: 12px; color: var(--muted); text-align: right; margin: 4px 0 0; }
.nota { font-size: 13px; color: var(--muted); margin: 0; }
.error { font-size: 13px; color: var(--coral); margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 14px; border: 1px solid var(--borde-fuerte); border-radius: 999px; font-size: 15px; }
.chip[aria-pressed="true"] { background: var(--gold); color: #2A1C06; border-color: var(--gold); font-weight: 600; }
/* 1 · nombre y edad en una fila (artboard `Main`) */
.fila-nombre-edad { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; }
.campo-bloque { display: flex; flex-direction: column; min-width: 0; }
.con-unidad { position: relative; }
.fila-nombre-edad .campo-edad { padding-right: 50px; font-weight: 700; }
.fila-nombre-edad .campo-edad.ok { border-color: rgba(240, 201, 105, .7); }
.con-unidad .unidad { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 15px;
  color: var(--muted); pointer-events: none; }
.nota.aviso { color: var(--gold); }
/* 0 · inicio «¿Para quién es?»: la tarjeta que se vende, grande y con imagen; las que aún no, pequeñas y en fila */
.inicio { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.inicio-tarjeta { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; padding: 0; overflow: hidden;
  border-radius: var(--r-tarjeta); border: 2px solid rgba(248, 241, 231, .12); background: var(--plum-700);
  color: var(--cream); text-align: left; }
button.inicio-tarjeta:hover, button.inicio-tarjeta:active { border-color: var(--gold); }
.inicio-foto { display: block; width: 100%; aspect-ratio: 720 / 420; object-fit: cover; }
.inicio-pie { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; }
.inicio-textos { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.inicio-titulo { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 22px; letter-spacing: -.2px; }
.inicio-sub { font-size: 14px; line-height: 1.35; color: var(--muted); }
.inicio-precio { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--gold); }
.inicio-flecha { flex: 0 0 auto; color: var(--gold); display: flex; }
.inicio-cerradas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.inicio-cerradas:empty { display: none; }
.inicio-tarjeta.cerrada { padding: 12px 14px 14px; border-style: dashed; background: transparent; }
.inicio-tarjeta.cerrada .inicio-titulo { font-size: 17px; color: var(--muted); }
.inicio-tarjeta.cerrada .inicio-sub { font-size: 12.5px; }
.inicio-pronto { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px;
  font-weight: 700; color: var(--muted); border: 1px solid rgba(248, 241, 231, .22); }
.inicio-confianza { text-align: center; }
.tarjeta-retomar { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; box-sizing: border-box;
  border-radius: var(--r-tarjeta); border: 2px solid var(--gold); background: var(--plum-800); }
.tarjeta-retomar p { margin: 0; font-size: 16px; font-weight: 600; }
.retomar-botones { display: flex; flex-direction: column; gap: 8px; }
.retomar-botones button { width: 100%; }
/* 1 · «Es… (Niño) (Niña)» debajo del nombre y la edad */
.fila-genero { display: flex; align-items: center; gap: 12px; }
.fila-genero .etiqueta { margin: 0; }

.opciones { display: flex; flex-direction: column; gap: 10px; }
.opcion { display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  background: var(--plum-700); border: 2px solid transparent; border-radius: var(--r-tarjeta); padding: 12px; }
.opcion[aria-checked="true"] { border-color: var(--gold); }
.radio { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--borde-fuerte); flex: 0 0 auto; display: grid; place-items: center; }
.opcion[aria-checked="true"] .radio { border-color: var(--gold); }
.opcion[aria-checked="true"] .radio::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--gold); }
.opcion .textos { flex: 1; min-width: 0; }
.opcion .titulo { font-family: Fraunces, Georgia, serif; font-size: 19px; font-weight: 700; }
.opcion .sub { font-size: 14px; color: var(--muted); }
.opcion .precio { font-weight: 700; white-space: nowrap; }
.tachado { color: var(--muted); text-decoration: line-through; font-weight: 400; margin-right: 6px; }
.etiqueta-oferta { display: inline-block; background: var(--gold); color: #2A1C06; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.muestra { width: 64px; height: 104px; border-radius: 12px; background: var(--plum-900); border: 1px dashed var(--borde-fuerte);
  display: grid; place-items: center; text-align: center; font-size: 10px; color: var(--muted); padding: 4px; flex: 0 0 auto; }
.muestra.grande { width: 96px; height: 150px; }
/* la tarjeta entera (980x1880, esquinas ya transparentes): a 64 de ancho sale de 123 de alto */
.muestra-foto { width: 64px; height: auto; aspect-ratio: 980 / 1880; flex: 0 0 auto; display: block; }

/* 6 · carrusel de temas, el «Paso 4» (artboards `TemaCarrusel` / `TemaVuelta`; rediseñado el 28/09).
   Antes la tarjeta medía 282×451 FIJA, pensada para 390×844 sin las barras del navegador. En móviles de verdad el
   hueco entre la cabecera y el dock es de 300-450 px y la pantalla pedía ~650: se cortaba la cara y, en un Android, no
   había forma de subir. Ahora esta pantalla NO tiene scroll vertical: `medir()` (app.js) da a la tarjeta el alto que
   quede y el ancho por la proporción de la imagen; el título, la nota y los puntos van SOBRE la imagen, las flechas a
   los lados, y tocar la tarjeta centrada la abre a pantalla completa (el visor), que es donde se ve con detalle. */
#conversacion.galeria { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
/* la pregunta y la tarjeta, juntas y centradas en el alto que haya. Con márgenes `auto` y no con `justify-content:
   center`, que si algo no cabe lo saca también por arriba (ver #conversacion) */
.banda-carrusel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.pregunta-universo { margin: auto 0 0; font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 20px; line-height: 1.2;
  letter-spacing: -.2px; text-align: center; text-wrap: balance; }
.pregunta-universo strong { font-weight: 900; }
.carrusel-marco { position: relative; flex: 0 0 auto; height: var(--alto, 430px); display: flex; margin: 0 -16px auto; }
/* `position: relative` NO es de adorno: hace del carrusel el `offsetParent` de sus tarjetas, que es con lo que
   `laCentrada()` y `centrar()` comparan su `scrollLeft`. Sin él, `offsetLeft` se medía desde la página: en el móvil
   coincidía, pero con la columna centrada en una pantalla ancha el dorado y el título caían en la tarjeta ANTERIOR
   a la centrada (visto por Isaac el 26/09). `--ancho`, `--alto` y `--lado` los pone `medir()`. */
.carrusel { position: relative; flex: 1 1 auto; min-width: 0; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 0 var(--lado, 54px); scrollbar-width: none;
  scroll-behavior: smooth; }
.carrusel::-webkit-scrollbar { display: none; }
.tema { flex: 0 0 var(--ancho, 282px); height: var(--alto, 430px); box-sizing: border-box; scroll-snap-align: center;
  border-radius: var(--r-tarjeta); border: 3px solid transparent; background: var(--plum-900); overflow: hidden; position: relative;
  padding: 0; transition: border-color .2s ease; }
/* sobre la imagen, abajo: título, «no son plantillas» (Isaac, 27/09) y en qué tarjeta vas */
.tema-franja { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 44px 12px 12px; text-align: center; pointer-events: none;
  background: linear-gradient(to bottom, rgba(26, 15, 36, 0), rgba(26, 15, 36, .84) 42%, rgba(26, 15, 36, .95)); }
.tema-titulo { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 22px; line-height: 1.12; letter-spacing: -.2px;
  color: var(--cream); text-wrap: balance; }
.tema-titulo.largo { font-size: 19px; }
.tema-nota { font-size: 12.5px; line-height: 1.35; color: var(--muted); text-wrap: balance; }
.tema-franja .puntos-carrusel { margin-top: 4px; }
.tema-ampliar { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 999px;
  background: rgba(26, 15, 36, .82); color: var(--cream); display: grid; place-items: center; }
/* en un móvil bajo (tarjeta de menos de 420 px) todo un punto más pequeño */
.carrusel.bajo .tema-franja { padding: 36px 10px 10px; gap: 3px; }
.carrusel.bajo .tema-titulo { font-size: 19px; }
.carrusel.bajo .tema-titulo.largo { font-size: 17px; }
.carrusel.bajo .tema-nota { font-size: 11.5px; }
/* la nota corta (solo en inglés, `p6.unica_corta`) sustituye a la larga en las tarjetas bajas */
.tema-nota.corta, .carrusel.bajo .tema-nota.larga { display: none; }
.carrusel.bajo .tema-nota.corta { display: block; }
.flecha-lado { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 36px; height: 36px; border-radius: 999px;
  background: rgba(26, 15, 36, .72); border: 1px solid var(--borde); color: var(--cream); display: grid; place-items: center; }
.flecha-lado.izq { left: 4px; }
.flecha-lado.der { right: 4px; }
.flecha-lado[hidden] { display: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* el dock del paso 4 en UNA fila: «Otra idea» junto a «Elegir este» (58 px más para la tarjeta) */
#dock > .fila-dock { flex-direction: row; align-items: center; gap: 10px; }
.fila-dock .principal { flex: 1 1 auto; min-width: 0; }
.fila-dock .enlace-lapiz { flex: 0 0 auto; min-height: 56px; padding: 0 16px; border: 1px solid var(--borde-fuerte);
  border-radius: 999px; white-space: nowrap; }
/* todas con su brillo (Isaac, 26/09): las imágenes son lo que vende; la elegida se distingue sólo por el borde dorado */
.tema[aria-checked="true"] { border-color: var(--gold); }
.tema-hueco { position: absolute; left: 14px; top: 52px; right: 14px; bottom: 14px; box-sizing: border-box;
  border-radius: 12px; border: 1px dashed rgba(248, 241, 231, .35); display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; font-size: 15px; line-height: 1.45; color: var(--muted); }
/* la imagen del tema a sangre (564×860: la tarjeta tiene su misma proporción, así que se ve entera), con la cara arriba */
.tema-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tema-pastilla { position: absolute; left: 12px; top: 12px; height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(26, 15, 36, .82); color: var(--cream); font-size: 12px; font-weight: 700; display: flex; align-items: center; }
/* tarjeta «Tu idea» (sin imagen) */
.tema-propio { background: var(--plum-700); padding: 22px 20px 20px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; }
.tp-top { display: flex; flex-direction: column; gap: 14px; }
.tp-pastilla { align-self: flex-start; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--gold); color: #2A1C06;
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.tp-pastilla svg { width: 13px; height: 13px; }
.tp-nombre { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 38px; line-height: 1.02; letter-spacing: -.6px; }
.tp-frase { font-size: 15px; line-height: 1.45; color: var(--muted); }
.tp-bottom { display: flex; flex-direction: column; gap: 10px; }
.tp-colores-tit { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tema-propio .paleta-fila { font-size: 15px; }
.tp-nota { font-size: 12.5px; line-height: 1.4; color: var(--muted); padding-top: 6px; border-top: 1px solid rgba(248, 241, 231, .10); }
.tp-check { position: absolute; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 999px; background: var(--gold);
  color: #2A1C06; display: none; align-items: center; justify-content: center; }
.tema-propio[aria-checked="true"] .tp-check { display: flex; }
.tp-check svg { stroke-width: 3; }
/* «Tu idea» en una tarjeta baja (y estrecha: los nombres de paleta van a dos líneas): con menos aire, la frase en 3
   líneas, UNA paleta y sin la nota. Los colores se eligen igual en el paso siguiente */
.carrusel.bajo .tema-propio { padding: 16px 14px 14px; }
.carrusel.bajo .tp-top { gap: 10px; }
.carrusel.bajo .tp-nombre { font-size: 28px; }
.carrusel.bajo .tp-frase { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carrusel.bajo .tp-bottom > .paleta-fila ~ .paleta-fila, .carrusel.bajo .tp-nota { display: none; }

/* 6 · el visor: la imagen del tema a pantalla completa, entera, ampliable con dos dedos (28/09) */
.visor { position: fixed; inset: 0; z-index: 30; background: var(--plum-900); color: var(--cream); display: flex; flex-direction: column; }
.visor-escena { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; place-items: center;
  touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; }
/* llena la escena y la imagen se ajusta dentro (contain): el tamaño no salta al cambiar la pequeña por la grande, y el
   origen de la transformación es el centro de la escena, desde donde el visor mide los gestos */
.visor-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: center center;
  will-change: transform; -webkit-user-drag: none; }
.visor-img.animar { transition: transform .22s ease, opacity .22s ease; }
.visor-cerrar { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 1; width: 44px; height: 44px;
  border-radius: 999px; background: rgba(26, 15, 36, .72); border: 1px solid var(--borde); color: var(--cream); display: grid; place-items: center; }
/* flechas sólo con ratón: en el móvil se desliza */
.visor-flecha { display: none; }
@media (hover: hover) and (pointer: fine) {
  .visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 44px; height: 44px; border-radius: 999px;
    background: rgba(26, 15, 36, .72); border: 1px solid var(--borde); color: var(--cream); display: grid; place-items: center; }
  .visor-flecha.izq { left: 12px; } .visor-flecha.der { right: 12px; }
  .visor-flecha[hidden] { display: none; }
}
.visor-pie { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(248, 241, 231, .10); }
.visor-pie > * { width: 100%; max-width: 398px; }
.visor-titulo { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 22px; line-height: 1.15; text-align: center; text-wrap: balance; }
.visor-pista { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.puntos-carrusel { display: flex; gap: 6px; justify-content: center; align-items: center; }
.punto { width: 8px; height: 8px; border-radius: 999px; background: rgba(248, 241, 231, .30); }
.punto.activo { width: 22px; background: var(--gold); }
.enlace-lapiz { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; }
/* 6b · bajo «¡Me encanta!»: «Probar otra versión» y «Escribe otra idea», discretos y en una fila */
.enlaces-idea { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; }
.enlaces-idea .enlace { min-height: 44px; }
/* paleta con NOMBRE (6b/6c): círculos solapados sin borde + el nombre */
.paleta-fila { display: flex; align-items: center; gap: 10px; font-size: 14px; }

/* paletas */
.paleta-circulos { display: inline-flex; align-items: center; }
.circulo { width: 26px; height: 26px; border-radius: 999px; border: 2px solid var(--plum-800); }
.circulo + .circulo { margin-left: -8px; }

/* 2 · qué crear (artboard `Formato`): tarjeta ancha imagen · textos · chevron */
.formato { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 10px 14px 10px 10px; border-radius: var(--r-tarjeta); background: var(--plum-700);
  border: 2px solid rgba(248, 241, 231, .12); color: var(--cream); }
.formato[aria-checked="true"] { border-color: rgba(240, 201, 105, .55); }
.formato > svg { flex: 0 0 auto; color: var(--muted); }
.formato-textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.formato-textos .titulo { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 20px; }
.formato-textos .sub { font-size: 13px; line-height: 1.35; color: var(--muted); }
.pie-formato { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 4px; font-size: 13px; color: var(--muted); }
.pie-formato svg { flex: 0 0 auto; color: var(--gold); }

/* 4 · lugar (artboard `Lugar`): contador dentro del campo, chips con icono, vista previa */
.campo-contador { position: relative; }
.campo.con-contador { padding-right: 64px; }
.contador-dentro { position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.chip-lugar { min-height: 44px; padding: 0 14px; border: 1px solid rgba(248, 241, 231, .18); background: var(--plum-700);
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--cream); display: inline-flex; align-items: center; gap: 6px; }
.chip-lugar svg { color: var(--gold); flex: 0 0 auto; }
/* 6b · ideas originales bajo el rechazo de una marca (28/09): UNA fila que se desliza, para no llenar el dock */
.ideas-originales { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.ideas-originales::-webkit-scrollbar { display: none; }
.chip-idea { flex: 0 0 auto; white-space: nowrap; }
/* vista previa del lugar */
.previa { background: var(--paper); border-radius: 16px; padding: 16px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.previa .fecha { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1F1A24; }
.previa .lugar { font-size: 15px; color: #3D3845; min-height: 20px; }

/* ── resumen (pantalla 10, artboard `Resumen`) ─────────────────────────────
   Todas las filas en UNA tarjeta con separadores. La fila NO es pulsable: sólo «Cambiar» navega. */
.tarjeta-resumen { background: var(--plum-800); border: 1px solid rgba(248, 241, 231, .10); border-radius: var(--r-tarjeta);
  padding: 0 6px 0 14px; display: flex; flex-direction: column; }
.fila-r { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid rgba(248, 241, 231, .08); }
.fila-r:last-child { border-bottom: none; }
.fila-ico { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; background: var(--plum-700); color: var(--gold);
  display: grid; place-items: center; }
.fila-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fila-clave { font-size: 12px; color: var(--muted); }
.fila-valor { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fila-detalle { font-size: 13px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.fila-cambiar { flex: 0 0 auto; min-height: 44px; padding: 0 10px; display: flex; align-items: center;
  color: var(--gold); font-size: 13px; font-weight: 600; white-space: nowrap; }
.caja-4k { display: flex; gap: 12px; align-items: center; background: var(--plum-700); border: 2px solid transparent;
  border-radius: var(--r-tarjeta); padding: 12px; width: 100%; text-align: left; }
.caja-4k[aria-checked="true"] { border-color: var(--gold); }
.casilla { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--borde-fuerte); display: grid; place-items: center;
  flex: 0 0 auto; }
.caja-4k .precio { white-space: nowrap; font-weight: 700; }
.caja-4k[aria-checked="true"] .casilla { border-color: var(--gold); background: var(--gold); color: #2A1C06; font-weight: 700; }
.total { display: flex; justify-content: space-between; align-items: baseline; }
.total span:first-child { font-size: 15px; color: var(--muted); }
.total .cifra { font-size: 20px; font-weight: 700; }   /* Inter, no Fraunces (lienzo) */
/* código de descuento (03/10): todo en el dock, junto al total: el enlace, el campo o la línea del descuento */
.total.descuento span:first-child { font-size: 14px; }
.total.descuento .cifra { font-size: 15px; font-weight: 600; color: var(--gold); }
.total.descuento { align-items: center; }
.codigo-txt { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.codigo-quitar { font-size: 14px; min-height: 40px; padding: 0 8px; }
.codigo-abrir { align-self: flex-start; font-size: 14px; min-height: 40px; padding: 0; }
.codigo-bloque { display: flex; flex-direction: column; }
.aviso-codigo { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--cream); background: rgba(255, 94, 135, .12);
  border: 1px solid rgba(255, 94, 135, .4); border-radius: var(--r-campo); padding: 10px 12px; }
.codigo-mirando { min-height: 40px; margin: 0; display: flex; align-items: center; font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pie-pago { text-align: center; font-size: 12.5px; }
/* arriba del resumen: SU foto (marco coral, como al subirla) y, al lado y pequeño, su universo */
.resumen-cabecera { display: flex; gap: 14px; align-items: center; }
.resumen-foto { width: 112px; height: 140px; flex: 0 0 auto; object-fit: cover; border-radius: 16px; border: 3px solid var(--coral); }
.resumen-universo { display: flex; gap: 10px; align-items: center; min-width: 0; }
.resumen-tema-img { width: 52px; height: 80px; flex: 0 0 auto; object-fit: cover; object-position: center top; border-radius: 10px;
  border: 1px solid rgba(248, 241, 231, .18); }
.resumen-universo-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.resumen-tema { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.resumen-estilo { font-size: 13px; color: var(--muted); }
.resumen-universo-txt .paleta-fila { font-size: 13px; }
.resumen-frase { margin: 0; font-size: 15px; font-weight: 600; }
.resumen-previa { padding: 12px; gap: 4px; }
.resumen-previa .lugar { font-size: 14px; }
.resumen-titular { margin-top: 6px; font-size: 12.5px; }
/* 9 · «¿Querías decir …@gmail.com?» (dorado) y «No, mi email es así» (discreto), bajo el campo */
.aviso-email { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; }
.aviso-email:empty { display: none; }
.aviso-email .enlace { min-height: 36px; text-align: left; }
.enlace-suave { color: var(--muted); font-size: 14px; }
/* la tarjeta de datos, más apretada: arriba ya está lo que ilusiona */
.tarjeta-resumen.compacta .fila-r { min-height: 44px; padding: 3px 0; }
.tarjeta-resumen.compacta .fila-ico { width: 28px; height: 28px; }

/* hoja de dudas (artboard `Duda`): asa, título + X, conversación arriba, chips dorados, píldora con enviar */
.hoja { position: fixed; inset: 0; background: rgba(8, 4, 12, .72); display: flex; align-items: flex-end; z-index: 10; }
.hoja.oculto { display: none; }
.panel-dudas { width: 100%; box-sizing: border-box; height: 660px; max-height: 88svh; background: var(--plum-800);
  border-top: 1px solid rgba(248, 241, 231, .12); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; }
.dudas-asa { display: flex; justify-content: center; padding-top: 8px; }
.dudas-asa span { width: 40px; height: 5px; border-radius: 999px; background: rgba(248, 241, 231, .25); }
.dudas-cab { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 6px 20px; }
.dudas-cab h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 22px; }
.dudas-conv { flex-grow: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 4px 16px 8px; }
.dudas-conv-inner { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.panel-dudas .burbuja-bot { font-size: 15px; }
.dudas-chips { padding: 6px 16px 0; }
.chip-duda { height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(240, 201, 105, .55);
  background: transparent; color: var(--gold); font-size: 14px; font-weight: 600; }
.dudas-input { padding: 12px 16px 8px; }
.dudas-volver { margin: 4px 16px calc(20px + env(safe-area-inset-bottom)); }

/* 9 · email (artboard `Email`): insignia de check dentro del campo, nota con candado, miniatura en «Foto lista» */
.campo-check { position: relative; }
.campo.con-check { padding-right: 50px; }
.email-check { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 999px;
  background: var(--gold); color: #2A1C06; display: none; align-items: center; justify-content: center; }
.email-check.visible { display: flex; }
.email-check svg { stroke-width: 3; }
.nota-candado { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.nota-candado svg { flex: 0 0 auto; }
.burbuja-cliente.con-mini { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; }
.burbuja-mini { display: block; width: 40px; height: 50px; border-radius: 13px 13px 3px 13px; overflow: hidden; flex: 0 0 auto; }
.burbuja-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (min-width: 560px) { body { max-width: 430px; margin: 0 auto; box-shadow: 0 0 0 1px var(--borde); } }

/* 5 · estilo (artboard `Estilo`): tarjetas verticales de ancho fijo, centradas; imagen 2:3 arriba */
.rejilla-estilos { display: flex; justify-content: center; gap: 10px; }
.estilo { position: relative; flex: 0 0 108px; padding: 0; border-radius: 16px; border: 2px solid rgba(248, 241, 231, .12);
  background: var(--plum-700); color: var(--cream); text-align: left; overflow: hidden; display: flex; flex-direction: column; }
.estilo[aria-checked="true"] { border-color: var(--gold); }
.estilo-img { display: block; width: 100%; aspect-ratio: 2 / 3; position: relative; overflow: hidden; background: var(--plum-900); }
.estilo-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.estilo-hueco { position: absolute; inset: 8px; border-radius: 10px; border: 1px dashed rgba(248, 241, 231, .35);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; font-size: 11px; line-height: 1.3; color: var(--muted); }
.estilo-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 999px; background: var(--gold);
  color: #2A1C06; display: flex; align-items: center; justify-content: center; }
.estilo-check svg { stroke-width: 3; }
.estilo-textos { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; }
.estilo-textos .titulo { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 16px; line-height: 1.15; }
.estilo-textos .sub { font-size: 12px; line-height: 1.3; color: var(--muted); }
.estilo-reco { align-self: flex-start; margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--gold);
  border: 1px solid rgba(240, 201, 105, .55); border-radius: 999px; padding: 2px 7px; }

/* 3 · día y hora (artboard `Fecha`): rejilla de 5 días (+ «Otra») y de 3 horas (+ «Otra hora»); resumen con reloj */
.rejilla-dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rejilla-horas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.casilla { width: 100%; height: 64px; border-radius: var(--r-campo); border: 1px solid var(--borde); background: var(--plum-700); color: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.casilla .dl-dow { font-size: 12px; font-weight: 600; }
.casilla .dl-dm { font-size: 15px; font-weight: 700; }
.casilla .dl-otra { font-size: 12px; font-weight: 600; }
.casilla[aria-pressed="true"] { background: var(--gold); color: #2A1C06; border-color: var(--gold); }
.casilla-hora { width: 100%; height: 46px; border-radius: var(--r-campo); border: 1px solid var(--borde); background: var(--plum-700); color: var(--cream);
  font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.casilla-hora[aria-pressed="true"] { background: var(--gold); color: #2A1C06; border-color: var(--gold); }
.casilla-hora.otra { font-size: 15px; font-weight: 600; }
.casilla.otra, .casilla-hora.otra { border: 1px dashed var(--borde-fuerte); background: transparent; }
.casilla.otra[aria-pressed="true"], .casilla-hora.otra[aria-pressed="true"] { border: 1px solid var(--gold); background: var(--gold); color: #2A1C06; }
.oculto-picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.resumen-fecha { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-campo);
  background: var(--plum-900); border: 1px solid rgba(248, 241, 231, .10); font-size: 15px; font-weight: 600; }
.resumen-fecha svg { color: var(--gold); flex: 0 0 auto; }

/* 6b · píldora de idea y tarjeta del resultado (artboard `TemaIA`) */
.fila-pildora { display: flex; gap: 8px; align-items: center; }
.campo.pildora { border-radius: 999px; padding: 0 18px; }
.boton-enviar { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 999px; border: 1px solid rgba(248, 241, 231, .18);
  background: var(--plum-700); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.boton-enviar[disabled] { opacity: .5; cursor: default; }
.boton-48 { min-height: 48px; }
.tarjeta-idea { width: 270px; box-sizing: border-box; background: var(--plum-700); border: 1px solid rgba(240, 201, 105, .45);
  border-radius: 18px 18px 18px 6px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.ti-cab { display: flex; flex-direction: column; gap: 4px; }
.ti-tit { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.ti-nombre { font-family: Fraunces, Georgia, serif; font-weight: 900; font-size: 24px; line-height: 1.1; }
.ti-frase { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.ti-colores { display: flex; flex-direction: column; gap: 8px; }
.ti-colores-tit { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ti-paletas { display: flex; flex-direction: column; gap: 8px; }

/* 7 · colores (artboard `Colores`): opción 64px con círculos 38px y radio a la DERECHA; enviar cuadrado */
.opcion-color { width: 100%; box-sizing: border-box; height: 64px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px 0 12px; border-radius: var(--r-tarjeta); border: 2px solid rgba(248, 241, 231, .12);
  background: var(--plum-700); color: var(--cream); text-align: left; }
.opcion-color[aria-checked="true"] { border-color: var(--gold); }
.opcion-color-label { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; }
.radio-der { width: 22px; height: 22px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--borde-fuerte);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.opcion-color[aria-checked="true"] .radio-der { border-color: var(--gold); }
.radio-der-dot { width: 10px; height: 10px; border-radius: 999px; background: transparent; }
.opcion-color[aria-checked="true"] .radio-der-dot { background: var(--gold); }
.boton-enviar-cuadrado { width: 52px; height: 52px; flex: 0 0 auto; border-radius: var(--r-campo); border: 1px solid rgba(248, 241, 231, .18);
  background: var(--plum-700); color: var(--cream); display: flex; align-items: center; justify-content: center; }
.boton-enviar-cuadrado[disabled] { opacity: .5; cursor: default; }

/* 8 · foto (artboard `Foto`): ejemplo con borde dorado + consejos con baldosa de icono */
.foto-consejos { display: flex; gap: 14px; align-items: center; }
.foto-ejemplo-col { width: 104px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.foto-ejemplo { width: 104px; height: 130px; box-sizing: border-box; border-radius: 14px; border: 2px solid var(--gold);
  background: var(--plum-900); overflow: hidden; display: grid; place-items: center; }
.foto-ejemplo-txt { font-size: 11px; line-height: 1.3; color: var(--muted); text-align: center; padding: 6px; }
.foto-ejemplo-img { display: block; width: 100%; height: 100%; object-fit: cover; }   /* 312×390, 3× del hueco */
.foto-ejemplo-ok { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--gold); }
.foto-ejemplo-ok svg { stroke-width: 3; }
.consejos { list-style: none; margin: 0; padding: 0; flex-grow: 1; display: flex; flex-direction: column; gap: 10px; }
.consejo { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; color: var(--cream); }
.consejo-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; background: var(--plum-700); color: var(--gold);
  display: flex; align-items: center; justify-content: center; }
.aviso-foto strong { color: var(--gold); }

/* 8b · foto revisada (artboard `FotoCheck`): foto en marco coral y dock de altura fija */
.foto-marco { padding: 4px; border-radius: 20px 20px 6px 20px; background: var(--coral); }
.foto-marco-img { display: block; width: 132px; height: 166px; object-fit: cover; border-radius: 16px 16px 4px 16px; }
.foto-marco-img.borrosa { filter: blur(10px) brightness(.6); }
.dock-fijo { min-height: 130px; justify-content: center; }