/* ===========================================================
   El origen que llevas en tu nombre — estilos de página
   Scoped a .origen / .origen-* para no chocar con el sitio.
   Usa los tokens de marca de custom.css (:root).
   =========================================================== */

.origen-body { background: var(--crema-page, #fdfaf3); }

/* ---------- Header minimal ---------- */
.origen-header{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(253,250,243,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(58,36,16,.08);
}
.origen-brand{ display:flex; align-items:center; gap:.55rem; flex-shrink:0; text-decoration:none; }
.origen-brand img{ width:36px; height:36px; object-fit:contain; }
.origen-wordmark{
  font-family: Georgia,'Times New Roman',serif; font-weight:700;
  letter-spacing:-.01em; color:var(--marron,#3a2410);
  font-size:1.12rem; line-height:1; white-space:nowrap;
}
.origen-wordmark .it{ color:var(--rojo,#c8201f); font-style:italic; font-size:.94em; }
.origen-header-cta{ font-size:.78rem !important; padding:.6rem 1.1rem !important; gap:.5rem; }
.origen-header-cta i{ font-size:.85em; }
@media (max-width:520px){ .origen-header-cta span{ display:none; } .origen-header-cta{ padding:.6rem .8rem !important; } }

/* ---------- Layout base ---------- */
.origen{ font-family: var(--font-serif,"Lora",Georgia,serif); color:var(--marron,#3a2410); }
.origen-wrap{ max-width: 720px; margin:0 auto; padding: clamp(2.5rem,7vw,5rem) clamp(1.25rem,5vw,2rem); }
.origen-hidden{ display:none !important; }

.origen-eyebrow{
  font-family: var(--font-ui,"Inter Tight",sans-serif);
  text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; font-weight:700;
  color:var(--oro-2,#b08c4a); margin-bottom:1.1rem;
}

.origen-h1{
  font-family: var(--font-display,"Lora",serif);
  font-weight:600; line-height:1.08; letter-spacing:-.015em;
  font-size: clamp(2.3rem, 6.5vw, 3.9rem);
  color: var(--marron-deep,#2a1808); margin-bottom:1.3rem; text-wrap:balance;
}
.origen-h1 em{ font-style:italic; color:var(--rojo,#c8201f); }

.origen-lead{
  font-size: clamp(1.05rem,2.6vw,1.28rem); line-height:1.65;
  color: var(--marron-2,#5a3a22); max-width:38ch; margin:0 auto 2.2rem; text-wrap:pretty;
}
.origen-portada{ text-align:center; }
.origen-portada .origen-lead{ margin-left:auto; margin-right:auto; }

/* ---------- Motivo "constelación" (nodos del linaje) ---------- */
.origen-constelacion{
  position:relative; width:170px; height:96px; margin:0 auto 1.8rem;
}
.origen-constelacion .nodo{
  position:absolute; width:11px; height:11px; border-radius:50%;
  background:var(--oro,#c9a96a); box-shadow:0 0 0 5px rgba(201,169,106,.14);
  opacity:0; animation: origenNodo .7s var(--ease-out,cubic-bezier(.2,.7,.2,1)) forwards;
}
.origen-constelacion .n1{ left:8%;  top:8%;  animation-delay:.05s; }
.origen-constelacion .n2{ left:42%; top:0;   animation-delay:.18s; }
.origen-constelacion .n3{ left:78%; top:10%; animation-delay:.31s; }
.origen-constelacion .n4{ left:24%; top:48%; animation-delay:.44s; }
.origen-constelacion .n5{ left:64%; top:46%; animation-delay:.57s; }
.origen-constelacion .yo{
  left:46%; top:80%; width:15px; height:15px; background:var(--rojo,#c8201f);
  box-shadow:0 0 0 6px rgba(200,32,31,.16); animation-delay:.72s;
}
@keyframes origenNodo{ from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);} }
@media (prefers-reduced-motion: reduce){ .origen-constelacion .nodo{ animation:none; opacity:1; } }

/* ---------- Formulario portada ---------- */
.origen-form-portada{ max-width:420px; margin:0 auto; text-align:left; }
.origen-label{
  display:block; font-family:var(--font-ui,"Inter Tight",sans-serif);
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--marron,#3a2410); margin:0 0 .5rem;
}
.origen-label-soft{ margin-top:1rem; color:var(--marron-3,#8a6842); }
.origen-label-soft span{ text-transform:none; letter-spacing:0; font-weight:400; opacity:.8; }
.origen-input{
  width:100%; padding:.85rem 1.05rem; font-family:var(--font-serif,"Lora",serif); font-size:1.05rem;
  color:var(--marron,#3a2410); background:#fff;
  border:1.5px solid rgba(58,36,16,.16); border-radius:12px; transition:all .25s ease;
}
.origen-input:focus{ outline:none; border-color:var(--oro,#c9a96a); box-shadow:0 0 0 3px rgba(201,169,106,.15); }
.origen-input::placeholder{ color:#6e5436; }

.origen-btn-start{ width:100%; justify-content:center; margin-top:1.5rem; gap:.6rem; }

.origen-disclaimer-mini{
  font-family:var(--font-ui,"Inter Tight",sans-serif);
  font-size:.76rem; line-height:1.55; color:var(--marron-2,#5a3a22);
  margin-top:1.2rem; padding-left:1.4rem; position:relative;
}
.origen-disclaimer-mini i{ position:absolute; left:0; top:.18em; color:var(--oro-2,#b08c4a); }

/* ---------- Progreso ---------- */
.origen-progreso{ height:5px; background:rgba(58,36,16,.10); border-radius:99px; overflow:hidden; margin-bottom:.9rem; }
.origen-progreso-fill{ height:100%; width:0; background:linear-gradient(90deg,var(--oro,#c9a96a),var(--rojo,#c8201f)); border-radius:99px; transition:width .5s var(--ease-out,ease); }
.origen-paso-contador{
  font-family:var(--font-ui,"Inter Tight",sans-serif); font-size:.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--oro-2,#b08c4a); margin-bottom:1.6rem;
}

/* ---------- Tarjeta de paso ---------- */
.origen-paso{ animation: origenFade .5s var(--ease-out,ease) both; }
@keyframes origenFade{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.origen-paso-eyebrow{
  font-family:var(--font-ui,"Inter Tight",sans-serif); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:var(--rojo,#c8201f); margin-bottom:.7rem;
}
.origen-paso-titulo{
  font-family:var(--font-display,"Lora",serif); font-weight:600; line-height:1.18;
  font-size:clamp(1.6rem,4.2vw,2.3rem); color:var(--marron-deep,#2a1808); margin-bottom:1rem; text-wrap:balance;
}
.origen-paso-titulo em{ font-style:italic; color:var(--rojo,#c8201f); }
.origen-paso-texto{ font-size:1.06rem; line-height:1.7; color:var(--marron-2,#5a3a22); margin-bottom:1.6rem; max-width:62ch; text-wrap:pretty; }

/* Opciones */
.origen-opciones{ display:flex; flex-direction:column; gap:.7rem; }
.origen-opcion{
  display:flex; align-items:center; gap:.85rem; width:100%; text-align:left;
  padding:1rem 1.15rem; font-family:var(--font-serif,"Lora",serif); font-size:1.02rem;
  color:var(--marron,#3a2410); background:#fff; cursor:pointer;
  border:1.5px solid rgba(58,36,16,.14); border-radius:14px; transition:all .2s ease;
}
.origen-opcion:hover{ border-color:var(--oro,#c9a96a); background:#fffdf8; transform:translateX(3px); }
.origen-opcion.sel{ border-color:var(--rojo,#c8201f); background:#fdf3f2; box-shadow:0 6px 18px -12px rgba(200,32,31,.5); }
.origen-opcion-dot{
  width:20px; height:20px; flex-shrink:0; border-radius:50%;
  border:2px solid rgba(58,36,16,.25); transition:all .2s ease; position:relative;
}
.origen-opcion.sel .origen-opcion-dot{ border-color:var(--rojo,#c8201f); background:var(--rojo,#c8201f); }
.origen-opcion.sel .origen-opcion-dot::after{
  content:""; position:absolute; inset:0; margin:auto; width:7px; height:7px; border-radius:50%; background:#fff;
}

/* Insight revelado */
.origen-insight{
  margin-top:1.5rem; padding:1.3rem 1.4rem;
  background:var(--oro-suave,#f3e9cf); border:1px solid rgba(176,140,74,.45); border-radius:14px;
  font-size:1.02rem; line-height:1.65; color:var(--marron-2,#5a3a22); text-wrap:pretty;
  animation: origenFade .45s ease both;
}
.origen-insight strong{ color:var(--marron-deep,#2a1808); }
.origen-insight .firma{
  display:block; margin-top:.7rem; font-family:var(--font-ui,"Inter Tight",sans-serif);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--oro-2,#b08c4a);
}

.origen-paso-nav{ display:flex; justify-content:flex-end; margin-top:1.8rem; }

/* Paso "movimiento" (honrar) */
.origen-movimiento{
  text-align:center; padding:2rem 1.4rem; border-radius:18px;
  background:linear-gradient(180deg,#fffdf8,var(--crema,#f7f1e3));
  border:1px solid rgba(201,169,106,.4);
}
.origen-frase{
  font-family:var(--font-display,"Lora",serif); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,3.6vw,1.8rem); line-height:1.45; color:var(--marron-deep,#2a1808);
  margin:1rem auto 1.8rem; max-width:30ch;
}

/* ---------- Resultado ---------- */
.origen-res-eyebrow{
  font-family:var(--font-ui,"Inter Tight",sans-serif); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; color:var(--oro-2,#b08c4a); margin-bottom:.8rem; text-align:center;
}
.origen-res-titulo{
  font-family:var(--font-display,"Lora",serif); font-weight:600; line-height:1.15;
  font-size:clamp(1.9rem,5vw,2.8rem); color:var(--marron-deep,#2a1808); margin-bottom:1.4rem; text-align:center; text-wrap:balance;
}
.origen-res-titulo em{ font-style:italic; color:var(--rojo,#c8201f); }
.origen-res-cuerpo{
  font-size:1.1rem; line-height:1.75; color:var(--marron-2,#5a3a22);
  background:#fff; border:1px solid rgba(58,36,16,.1); border-radius:18px;
  padding:clamp(1.5rem,4vw,2.2rem); box-shadow:var(--shadow-card,0 10px 30px -20px rgba(58,36,16,.3));
}
.origen-res-cuerpo p{ margin-bottom:1.1rem; text-wrap:pretty; }
.origen-res-cuerpo p:last-child{ margin-bottom:0; }
.origen-res-sello{
  font-family:var(--font-display,"Lora",serif); font-style:italic; font-size:1.2rem;
  color:var(--rojo,#c8201f); text-align:center; margin:1.4rem 0 0;
}

/* Disclaimer salud (destacado) */
.origen-disclaimer-salud{
  display:flex; gap:.8rem; margin:1.8rem 0; padding:1.1rem 1.25rem;
  background:#fff7f0; border:1px solid rgba(176,140,74,.35); border-radius:14px;
  font-family:var(--font-ui,"Inter Tight",sans-serif); font-size:.82rem; line-height:1.55; color:var(--marron-2,#5a3a22);
}
.origen-disclaimer-salud i{ color:var(--oro-2,#b08c4a); font-size:1.1rem; margin-top:.1em; }

/* CTA principal */
.origen-cta-box{
  margin:2rem 0 1rem; padding:clamp(1.6rem,4vw,2.3rem); text-align:center;
  background:linear-gradient(160deg,var(--marron,#3a2410),var(--marron-deep,#2a1808));
  border-radius:20px; color:var(--crema,#f7f1e3);
}
.origen-cta-box h3{
  font-family:var(--font-display,"Lora",serif); font-weight:600; font-size:clamp(1.4rem,3.6vw,1.9rem);
  line-height:1.25; margin-bottom:.8rem; color:#fff;
}
.origen-cta-box h3 em{ font-style:italic; color:var(--oro,#c9a96a); }
.origen-cta-box p{ color:rgba(247,241,227,.82); font-size:1rem; line-height:1.6; max-width:42ch; margin:0 auto 1.6rem; }
.origen-cta-botones{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.origen-cta-botones .btn-rojo,.origen-cta-botones .btn-oro{ flex:0 1 auto; }

/* Captura email secundaria */
.origen-email{
  margin:1.6rem 0; padding:1.4rem 1.4rem; border-radius:16px;
  background:var(--crema,#f7f1e3); border:1px dashed rgba(176,140,74,.5);
}
.origen-email h4{
  font-family:var(--font-display,"Lora",serif); font-weight:600; font-size:1.15rem;
  color:var(--marron-deep,#2a1808); margin-bottom:.4rem;
}
.origen-email p{ font-size:.92rem; color:var(--marron-2,#5a3a22); margin-bottom:1rem; line-height:1.55; }
.origen-email-row{ display:flex; flex-wrap:wrap; gap:.6rem; }
.origen-email-row .origen-input{ flex:1 1 200px; }
.origen-email-btn{ flex:0 0 auto; white-space:nowrap; }
.origen-email-consent{
  display:flex; align-items:flex-start; gap:.5rem; margin-top:.9rem;
  font-family:var(--font-ui,"Inter Tight",sans-serif); font-size:.76rem; line-height:1.5; color:var(--marron-2,#5a3a22);
}
.origen-email-consent input{ margin-top:.18em; flex-shrink:0; }
.origen-email-consent a{ color:var(--rojo,#c8201f); text-decoration:underline; }
.origen-email-msg{ margin-top:.7rem; font-family:var(--font-ui,"Inter Tight",sans-serif); font-size:.85rem; min-height:1.2rem; }
.origen-email-msg.ok{ color:var(--verde-2,#5a7d3a); }
.origen-email-msg.err{ color:var(--rojo,#c8201f); }

/* Sigue explorando (cross-sell a herramientas existentes) */
.origen-explora{ margin:2rem 0 1rem; }
.origen-explora-tit{
  font-family:var(--font-ui,"Inter Tight",sans-serif); text-transform:uppercase; letter-spacing:.12em;
  font-size:.74rem; font-weight:700; color:var(--oro-2,#b08c4a); text-align:center; margin-bottom:1rem;
}
.origen-explora-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; }
.origen-explora-card{
  display:flex; align-items:center; gap:.7rem; padding:.85rem 1rem; text-decoration:none;
  background:#fff; border:1px solid rgba(58,36,16,.12); border-radius:12px;
  color:var(--marron,#3a2410); font-size:.92rem; transition:all .2s ease;
}
.origen-explora-card:hover{ border-color:var(--oro,#c9a96a); transform:translateY(-2px); box-shadow:var(--shadow-card,0 10px 30px -20px rgba(58,36,16,.3)); }
.origen-explora-card i{ color:var(--oro-2,#b08c4a); font-size:1.1rem; }

.origen-reiniciar{
  display:block; margin:1.5rem auto 0; background:none; border:none; cursor:pointer;
  font-family:var(--font-ui,"Inter Tight",sans-serif); font-size:.85rem; color:var(--marron-3,#8a6842);
  text-decoration:underline;
}
.origen-reiniciar:hover{ color:var(--rojo,#c8201f); }

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .origen-paso, .origen-insight{ animation:none !important; }
  .origen-progreso-fill{ transition:none !important; }
  .origen-opcion:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}
