/* ============================================================================
 * NÉBULA · nebula-ui-etapa2.css v1.0 — componentes nuevos de la Etapa 2 (F2)
 * ----------------------------------------------------------------------------
 * Archivo NUEVO y ADITIVO. Cargar DESPUÉS de nebula-tokens.css y nebula-ui.css.
 * No modifica ni sobreescribe ningún componente de la Fase 1.
 * Componentes: hero, tarjeta de ruta, selector de experiencia, banda nocturna,
 * tarjeta de ritual, ficha profesional, bloque de pasos, tarjeta de regalo,
 * sello de medios de pago, formulario Toc Toc.
 * ==========================================================================*/

/* ----------------------------- Hero (gradiente Amanecer) ----------------------------- */
.n-hero { background: var(--n-grad-amanecer); border-bottom: 1px solid var(--n-border);
  padding: calc(var(--n-sp-8) + var(--n-sp-4)) 0 var(--n-sp-8); }
.n-hero__inner { max-width: var(--n-container); margin: 0 auto; padding: 0 var(--n-sp-5);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--n-sp-7); align-items: center; }
.n-hero__title { font-family: var(--n-font-display); font-weight: 500;
  font-size: var(--n-size-h1); line-height: var(--n-lh-tight); margin: var(--n-sp-4) 0; }
.n-hero__text { font-size: var(--n-size-intro); color: var(--n-text-secondary);
  max-width: 56ch; margin-bottom: var(--n-sp-6); }
.n-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--n-sp-3); }
/* Visual orgánico interino (mariposa/luz) hasta tener fotografía real — nunca estética IA */
.n-hero__visual { position: relative; min-height: 300px; border-radius: var(--n-r-xl);
  background:
    radial-gradient(ellipse 60% 45% at 30% 35%, rgba(230, 222, 243, .9), transparent 70%),
    radial-gradient(ellipse 55% 40% at 72% 60%, rgba(220, 228, 236, .9), transparent 70%),
    radial-gradient(ellipse 40% 30% at 55% 30%, rgba(232, 201, 122, .28), transparent 70%),
    var(--n-surface);
  border: 1px solid var(--n-border); overflow: hidden; }
.n-hero__visual::after { content: "☽"; position: absolute; right: 8%; top: 10%;
  font-size: 40px; color: var(--n-accent-deep); opacity: .35; }
.n-hero__mariposa { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--n-font-display); font-size: 88px; color: var(--n-brand); opacity: .18; }
@media (max-width: 1023px) {
  .n-hero__inner { grid-template-columns: 1fr; }
  .n-hero__visual { min-height: 200px; order: -1; }
}

/* ----------------------------- Tarjeta de ruta («¿Qué necesitas hoy?») ----------------------------- */
.n-route { display: flex; flex-direction: column; gap: var(--n-sp-2); min-height: 200px;
  border-radius: var(--n-r-lg); padding: var(--n-sp-6) var(--n-sp-5);
  text-decoration: none; color: var(--n-text-primary); border: 1px solid transparent;
  box-shadow: var(--n-shadow-sm);
  transition: box-shadow var(--n-dur-slow) var(--n-ease-standard),
              transform var(--n-dur-slow) var(--n-ease-standard); }
.n-route:hover { box-shadow: var(--n-shadow-md); transform: translateY(-3px); }
.n-route__label { font-size: 11px; font-weight: 600; letter-spacing: var(--n-tracking-label); text-transform: uppercase; }
.n-route__title { font-family: var(--n-font-display); font-weight: 600; font-size: 22px; line-height: 1.25; }
.n-route__text { font-size: 13.5px; color: var(--n-text-secondary); flex: 1; }
.n-route__cta { font-size: 14px; font-weight: 600; color: var(--n-link); }
.n-route__cta::after { content: " →"; }
.n-route--talk   { background: var(--n-surface-mist); }
.n-route--talk .n-route__label { color: var(--n-action-emotional); }
.n-route--guide  { background: var(--n-surface-lavender); }
.n-route--guide .n-route__label { color: var(--n-link); }
.n-route--care   { background: var(--n-surface-sage); color: var(--n-text-ritual); }
.n-route--care .n-route__label, .n-route--care .n-route__cta { color: var(--n-action-ritual); }
.n-route--gift   { background: var(--n-surface-rose); }
.n-route--gift .n-route__label { color: #9C5A4B; }

/* ----------------------------- Selector «Experiencia recomendada» ----------------------------- */
.n-exp__chips { display: flex; flex-wrap: wrap; gap: var(--n-sp-2); margin: var(--n-sp-4) 0 var(--n-sp-5); }
.n-exp__chip { min-height: var(--n-touch-min); padding: 10px 18px; border-radius: var(--n-r-pill);
  border: 1.5px solid var(--n-border-input); background: var(--n-surface);
  font-family: var(--n-font-body); font-size: 14px; font-weight: 500; color: var(--n-text-primary);
  cursor: pointer; transition: all var(--n-dur-base) var(--n-ease-standard); }
.n-exp__chip[aria-pressed="true"] { background: var(--n-action); border-color: var(--n-action); color: #fff; }
.n-exp__panel[hidden] { display: none; }
.n-exp__scope { font-size: 11px; font-weight: 600; letter-spacing: var(--n-tracking-label);
  text-transform: uppercase; color: var(--n-text-secondary); }

/* ----------------------------- Banda nocturna (única superficie oscura del inicio) ----------------------------- */
.n-nightband { background: var(--n-grad-noche); color: var(--n-text-inverse);
  position: relative; overflow: hidden; }
/* transición suave hacia lo claro (bordes difuminados, sin cortes duros) */
.n-nightband::before, .n-nightband::after { content: ""; position: absolute; left: 0; right: 0;
  height: 48px; pointer-events: none; }
.n-nightband::before { top: 0; background: linear-gradient(to bottom, var(--n-bg-primary), transparent); opacity: .16; }
.n-nightband::after { bottom: 0; background: linear-gradient(to top, var(--n-bg-primary), transparent); opacity: .16; }
.n-nightband .n-eyebrow { color: var(--n-accent); }
.n-nightband__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--n-sp-7); align-items: center; }
.n-nightband__text { color: #B8A4E3; max-width: 54ch; }
.n-nightband h2 { color: var(--n-text-inverse); }
@media (max-width: 1023px) {
  .n-nightband__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ----------------------------- Tarjeta de ritual ----------------------------- */
.n-ritual { display: flex; flex-direction: column; border-radius: var(--n-r-lg); overflow: hidden;
  background: var(--n-surface); border: 1px solid var(--n-border); box-shadow: var(--n-shadow-sm);
  transition: box-shadow var(--n-dur-slow) var(--n-ease-standard), transform var(--n-dur-slow) var(--n-ease-standard); }
.n-ritual:hover { box-shadow: var(--n-shadow-md); transform: translateY(-3px); }
.n-ritual__media { height: 130px; position: relative; }
.n-ritual__media--sage   { background: linear-gradient(140deg, var(--n-surface-sage), #CBD4C4); }
.n-ritual__media--almond { background: linear-gradient(140deg, var(--n-surface-almond), var(--n-surface-sand)); }
.n-ritual__media--lavender { background: linear-gradient(140deg, var(--n-surface-lavender), #D6CBEE); }
.n-ritual__media::after { content: "❋"; position: absolute; right: 18px; bottom: 12px;
  font-size: 26px; color: rgba(51, 44, 36, .25); }
.n-ritual__body { padding: var(--n-sp-5); display: flex; flex-direction: column; gap: var(--n-sp-2); flex: 1; }
.n-ritual__intent { font-size: 11px; font-weight: 600; letter-spacing: var(--n-tracking-label);
  text-transform: uppercase; color: var(--n-action-ritual); }
.n-ritual__name { font-family: var(--n-font-display); font-weight: 600; font-size: 21px; }
.n-ritual__includes { font-size: 13.5px; color: var(--n-text-secondary); flex: 1; }
.n-ritual__moment { font-size: 12.5px; color: var(--n-text-secondary); font-style: italic; }

/* ----------------------------- Ficha profesional ----------------------------- */
.n-pro { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--n-sp-5);
  background: var(--n-surface); border: 1px solid var(--n-border); border-radius: var(--n-r-lg);
  padding: var(--n-sp-5); box-shadow: var(--n-shadow-sm); }
.n-pro__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  background: var(--n-surface-mist); display: flex; align-items: center; justify-content: center;
  font-family: var(--n-font-display); font-size: 34px; color: var(--n-action-emotional); }
.n-pro__name { font-family: var(--n-font-display); font-weight: 600; font-size: 21px; margin: 0; }
.n-pro__title { font-size: 13.5px; color: var(--n-text-secondary); }
.n-pro__reg { font-family: var(--n-font-mono); font-size: 12px; color: var(--n-text-secondary); }
.n-pro__areas { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--n-sp-2) 0; }
.n-pro__meta { display: flex; flex-wrap: wrap; gap: var(--n-sp-4); font-size: 13px;
  color: var(--n-text-secondary); margin: var(--n-sp-2) 0 var(--n-sp-3); }
@media (max-width: 767px) { .n-pro { grid-template-columns: 72px 1fr; }
  .n-pro__photo { width: 72px; height: 72px; font-size: 26px; } }

/* ----------------------------- Bloque de pasos («Cómo funciona») ----------------------------- */
.n-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--n-sp-5); counter-reset: n-step; }
.n-step { position: relative; background: var(--n-surface); border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg); padding: var(--n-sp-5); counter-increment: n-step; }
.n-step::before { content: counter(n-step); display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--n-surface-lavender);
  color: var(--n-brand); font-weight: 600; font-size: 15px; margin-bottom: var(--n-sp-3); }
@media (max-width: 767px) { .n-steps { grid-template-columns: 1fr; } }

/* ----------------------------- Tarjeta de regalo / kit ----------------------------- */
.n-gift { background: var(--n-surface); border: 1px solid var(--n-border); border-radius: var(--n-r-lg);
  overflow: hidden; box-shadow: var(--n-shadow-sm); display: flex; flex-direction: column; }
.n-gift__media { height: 120px; background: linear-gradient(140deg, var(--n-surface-rose), #E4CCC5); position: relative; }
.n-gift__media::after { content: "✽"; position: absolute; right: 18px; bottom: 10px; font-size: 24px; color: rgba(156, 90, 75, .35); }
.n-gift__body { padding: var(--n-sp-5); display: flex; flex-direction: column; gap: var(--n-sp-2); flex: 1; }
.n-gift__occasion { font-size: 11px; font-weight: 600; letter-spacing: var(--n-tracking-label);
  text-transform: uppercase; color: #9C5A4B; }

/* ----------------------------- Sello de medios de pago (informativo, NO clicable) ----------------------------- */
.n-payseal { display: inline-flex; flex-direction: column; gap: 6px;
  border: 1px dashed var(--n-border-input); border-radius: var(--n-r-md);
  padding: 12px 18px; background: var(--n-surface); max-width: 480px; }
.n-payseal__title { font-size: 11px; font-weight: 600; letter-spacing: var(--n-tracking-label);
  text-transform: uppercase; color: var(--n-text-secondary); }
.n-payseal__methods { font-size: 14px; font-weight: 600; color: var(--n-text-primary); }
.n-payseal__note { font-size: 12px; color: var(--n-text-secondary); line-height: 1.5; }

/* ----------------------------- Toc Toc (mensaje del día) ----------------------------- */
.n-toctoc { max-width: 640px; margin: 0 auto; }
.n-toctoc__msg { background: var(--n-surface); border: 1px solid var(--n-border);
  border-radius: var(--n-r-lg); padding: var(--n-sp-6); box-shadow: var(--n-shadow-sm);
  font-family: var(--n-font-display); font-size: clamp(18px, 2.2vw, 22px); font-style: italic;
  line-height: 1.5; color: var(--n-text-primary); }
.n-toctoc__msg--reveal { animation: n-reveal var(--n-dur-ritual) var(--n-ease-organic) both; }
.n-toctoc__date { font-size: var(--n-size-label); letter-spacing: var(--n-tracking-label);
  text-transform: uppercase; color: var(--n-text-secondary); margin-bottom: var(--n-sp-3); font-style: normal; font-family: var(--n-font-body); }

/* ----------------------------- Regla dura: hidden SIEMPRE oculta -----------------------------
 * El display de .n-btn/.n-exp__panel puede ganarle al atributo [hidden] del navegador.
 * Esta regla garantiza que un elemento oculto por commerce.js jamás se renderice. */
.n-page [hidden] { display: none !important; }

/* ----------------------------- Checkout NÉBULA (modal, estilo asistido) ----------------------------- */
.n-co__item { display: flex; justify-content: space-between; gap: var(--n-sp-4); align-items: baseline;
  padding-bottom: var(--n-sp-3); border-bottom: 1px solid var(--n-border); margin-bottom: var(--n-sp-4); }
.n-co__name { font-family: var(--n-font-display); font-size: 20px; font-weight: 600; color: var(--n-text-primary); }
.n-ship { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 var(--n-sp-4); }
.n-ship label { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1.5px solid var(--n-border-input); border-radius: var(--n-r-md); padding: 12px 14px;
  cursor: pointer; font-size: 14px; min-height: var(--n-touch-min); }
.n-ship label:has(input:checked) { border-color: var(--n-action); background: rgba(44,34,96,.04); }
.n-ship input { accent-color: var(--n-action); width: 18px; height: 18px; }
.n-ship .n-price { font-size: 14px; }
.n-sum { margin: var(--n-sp-4) 0; font-size: 14px; }
.n-sum__row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--n-text-secondary); }
.n-sum__row--total { border-top: 1px solid var(--n-border); margin-top: 6px; padding-top: 10px;
  color: var(--n-text-primary); font-weight: 600; font-size: 17px; }
.n-co__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--n-sp-4); }
@media (max-width: 600px) { .n-co__grid2 { grid-template-columns: 1fr; } }

/* ----------------------------- Carta del día (revelación en el inicio) ----------------------------- */
.n-carta-info h3 { font-family: var(--n-font-body); font-size: 11px; font-weight: 600;
  letter-spacing: var(--n-tracking-label); text-transform: uppercase; color: var(--n-accent); margin: 0 0 8px; }
.n-carta-info p { color: #CFC8E8; font-size: 14.5px; line-height: 1.7; margin: 0; max-width: 44ch; }
#carta-visual { min-width: 240px; }
.n-nightband .n-input { background: rgba(245,240,232,.06); color: var(--n-text-inverse);
  border-color: rgba(184,164,227,.45); }
.n-nightband .n-input:focus { border-color: var(--n-accent); box-shadow: 0 0 0 3px rgba(232,201,122,.25); }

/* ----------------------------- Alineación de tarjetas (rituales y productos) -----------------------------
 * El precio y el CTA se anclan al fondo para que las tres tarjetas queden parejas. */
.n-ritual__body .n-price { margin-top: auto; padding-top: 8px; }
.n-ritual__body .n-btn { width: 100%; }
.n-ritual__body .n-btn--tertiary { width: auto; align-self: center !important; }
.n-ritual__media img { display: block; }

/* ----------------------------- Asistente virtual NÉBULA ----------------------------- */
.n-asis-fab { position: fixed; right: var(--n-sp-4); bottom: 84px; z-index: 65;
  width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(232,201,122,.7);
  padding: 0; cursor: pointer; overflow: hidden; background: var(--n-grad-noche);
  box-shadow: 0 8px 26px rgba(26,17,71,.35); }
.n-asis-fab img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n-asis-fab::after { content: ""; position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(232,201,122,.45); animation: n-asis-halo 2.6s ease-out infinite; }
@keyframes n-asis-halo { 0% { box-shadow: 0 0 0 0 rgba(232,201,122,.45); } 70% { box-shadow: 0 0 0 14px rgba(232,201,122,0); } 100% { box-shadow: 0 0 0 0 rgba(232,201,122,0); } }

.n-asis { position: fixed; right: var(--n-sp-4); bottom: 84px; z-index: 80;
  width: min(380px, calc(100vw - 24px)); max-height: min(640px, calc(100vh - 110px));
  display: flex; flex-direction: column; border-radius: 20px; overflow: hidden;
  background: var(--n-surface); box-shadow: 0 24px 70px rgba(11,14,42,.4);
  border: 1px solid var(--n-border); }
.n-asis[hidden] { display: none !important; }
.n-asis__head { position: relative; background: var(--n-grad-noche); color: var(--n-text-inverse);
  padding: 14px 16px 12px; display: flex; align-items: center; gap: 12px; }
.n-asis__ava { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  border: 1.5px solid rgba(232,201,122,.7); animation: n-asis-vuelo 4.5s ease-in-out infinite; }
.n-asis__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes n-asis-vuelo { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-5px) rotate(1.2deg); } }
.n-asis__nombre { font-family: var(--n-font-display); font-size: 19px; line-height: 1.1; }
.n-asis__estado { font-size: 11px; color: #B8A4E3; letter-spacing: .06em; }
.n-asis__cerrar { margin-left: auto; background: none; border: none; color: var(--n-text-inverse);
  font-size: 18px; cursor: pointer; width: 40px; height: 40px; border-radius: 8px; }
.n-asis__chat { flex: 1; overflow-y: auto; padding: 16px; background: var(--n-bg-primary);
  display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
.n-asis__msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; }
.n-asis__msg--ella { background: var(--n-surface-lavender); color: var(--n-text-primary);
  border-bottom-left-radius: 6px; align-self: flex-start; }
.n-asis__msg--yo { background: var(--n-action); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.n-asis__msg--escribiendo { color: var(--n-text-secondary); font-style: italic; background: var(--n-surface); border: 1px dashed var(--n-border); }
.n-asis__sugs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; background: var(--n-bg-primary); }
.n-asis__sug { border: 1.5px solid var(--n-border-input); background: var(--n-surface); border-radius: 999px;
  padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--n-text-primary); cursor: pointer; }
.n-asis__pie { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--n-border); background: var(--n-surface); }
.n-asis__pie input { flex: 1; min-height: 44px; border: 1.5px solid var(--n-border-input); border-radius: 999px;
  padding: 10px 16px; font-family: var(--n-font-body); font-size: 14px; }
.n-asis__pie button { min-width: 44px; min-height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--n-action); color: #fff; font-size: 16px; }
.n-asis__nota { font-size: 10.5px; color: var(--n-text-secondary); text-align: center; padding: 0 14px 10px; background: var(--n-surface); }
@media (max-width: 480px) { .n-asis { bottom: 12px; right: 12px; } }