/* join.calmrecruiting.com — tienda del curso. Paleta y tipos de calmrecruiting.com. */
:root {
  --forest: #10201a; --forest-2: #16281f; --forest-3: #1f3628;
  --gold: #c9a860; --gold-soft: #dcc793; --gold-ink: #7a5e1e;
  --cream: #f3ede2; --paper: #faf7f0; --ink: #14140f; --muted: #6d6a5f;
  --line: rgba(20, 20, 15, .12); --line-d: rgba(255, 255, 255, .14);
  --error: #9b2c1f;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--forest); color: var(--cream); font: 400 1rem/1.6 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1rem, 4vw, 3rem); max-width: 1200px; margin: 0 auto; }
.barra__logo img { width: 150px; height: auto; }
.barra__idioma { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--gold-soft); border: 1px solid var(--line-d); padding: .45rem .9rem; border-radius: 2px; }
.barra__idioma:hover { border-color: var(--gold); }

.venta__grid { max-width: 1200px; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 3rem) 3rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.eyebrow { margin: 0 0 .75rem; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
h1 { margin: 0; font: 700 clamp(2.2rem, 5vw, 3.6rem)/1.08 'Playfair Display', Georgia, serif; letter-spacing: -.01em; text-wrap: balance; }
h1 sup { font-size: .4em; vertical-align: super; color: var(--gold); }
.lema { margin: 1rem 0 0; font: italic 500 clamp(1.3rem, 2.4vw, 1.65rem)/1.35 'Cormorant Garamond', Georgia, serif; color: var(--gold-soft); text-wrap: balance; }
.intro { margin: 1.25rem 0 0; max-width: 60ch; color: rgba(243, 237, 226, .82); }
.incluye { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .7rem; }
.incluye li { display: flex; gap: .75rem; align-items: flex-start; }
.incluye svg { color: var(--gold); margin-top: .25rem; }
.foto { margin: 2rem 0 0; }
.foto img { border-radius: 4px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.foto figcaption { margin-top: .5rem; font-size: .82rem; color: rgba(243, 237, 226, .6); }
.credenciales { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid var(--line-d); padding-top: 1.25rem; }
.credenciales dt { font: 700 1.5rem/1 'Playfair Display', Georgia, serif; color: var(--gold); font-variant-numeric: tabular-nums; }
.credenciales dd { margin: .4rem 0 0; font-size: .82rem; line-height: 1.35; color: rgba(243, 237, 226, .72); }

.compra { position: sticky; top: 1.5rem; }
.tarjeta { background: var(--paper); color: var(--ink); border-radius: 4px; padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: 0 30px 90px rgba(0, 0, 0, .45); }
.contador span { flex: 1; min-width: 0; line-height: 1.35; }
.contador { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.25rem; padding: .7rem .9rem; background: var(--forest); color: var(--cream); border-radius: 2px; font-size: .88rem; }
.contador svg { color: var(--gold); }
.contador__tiempo { margin-left: auto; font: 700 1.25rem/1 'DM Sans', sans-serif; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.precio__etiqueta { margin: 0 0 .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.precio { margin: 0; display: flex; align-items: baseline; gap: .6rem; font-variant-numeric: tabular-nums; }
.precio strong { font: 700 3rem/1 'Playfair Display', Georgia, serif; }
.precio s { font-size: 1.4rem; color: var(--muted); }
.precio span { font-size: .85rem; color: var(--muted); font-weight: 500; }
.precio__nota { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; }
.tarjeta h2 { margin: 1.5rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font: 700 1.2rem/1.3 'Playfair Display', Georgia, serif; }
.form { display: grid; gap: .85rem; }
.form label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 500; }
.form input { font: inherit; font-size: 1rem; padding: .8rem .9rem; border: 1px solid rgba(20, 20, 15, .22); border-radius: 2px; background: #fff; color: var(--ink); width: 100%; }
.form input:focus { border-color: var(--forest-3); outline: 2px solid rgba(201, 168, 96, .5); outline-offset: 0; }
.form input[aria-invalid="true"] { border-color: var(--error); }
.form small { margin-top: -.45rem; font-size: .8rem; color: var(--muted); }
.form__error { margin: 0; padding: .65rem .8rem; background: #f8e9e5; color: var(--error); border-radius: 2px; font-size: .9rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; width: 100%; margin-top: .4rem; padding: 1.1rem 1.5rem; border: 0; border-radius: 2px; cursor: pointer; background: var(--gold); color: var(--forest); font: 700 .85rem/1.2 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .3s var(--ease), transform .3s var(--ease); }
.boton:hover { background: var(--gold-soft); }
.boton:active { transform: translateY(1px); }
.boton[disabled] { opacity: .7; cursor: progress; }
.seguro { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0 0; font-size: .82rem; color: var(--muted); }
.seguro svg { margin-top: .2rem; color: var(--forest-3); }

.pie { max-width: 1200px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; border-top: 1px solid var(--line-d); font-size: .75rem; line-height: 1.55; color: rgba(243, 237, 226, .5); }
.pie p { margin: 0 0 .75rem; max-width: 110ch; }

.gracias__main { max-width: 720px; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 2rem) 3rem; text-align: center; }
.sello { width: 64px; height: 64px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--forest); }
.sello svg { width: 30px; height: 30px; stroke-width: 2.5; }
.gracias .lema { margin-left: auto; margin-right: auto; max-width: 40ch; }
.pasos, .ayuda { margin-top: 2.5rem; text-align: left; background: var(--paper); color: var(--ink); border-radius: 4px; padding: clamp(1.25rem, 3vw, 2rem); }
.pasos h2, .ayuda h2 { margin: 0 0 1rem; font: 700 1.2rem/1.3 'Playfair Display', Georgia, serif; display: flex; gap: .6rem; align-items: center; }
.pasos ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.pasos li { display: flex; gap: .9rem; align-items: flex-start; }
.pasos li > svg { width: 1.5rem; height: 1.5rem; color: var(--gold-ink); margin-top: .1rem; }
.pasos li p, .ayuda p { margin: .2rem 0 0; color: var(--muted); }
.ayuda { margin-top: 1.25rem; background: var(--forest-2); color: var(--cream); border: 1px solid var(--line-d); }
.ayuda p { color: rgba(243, 237, 226, .78); }
.ayuda a { color: var(--gold-soft); }
.cierre { margin-top: 2rem; color: rgba(243, 237, 226, .75); }

@media (max-width: 860px) {
  /* En móvil: presentación corta → precio y formulario → cifras (sin la foto). */
  .venta__grid { display: flex; flex-direction: column; gap: 0; padding-top: .5rem; }
  .presenta { display: contents; }
  .presenta > * { order: 1; }
  .compra { order: 2; position: static; margin-top: 1.75rem; }
  .credenciales { order: 3; margin-top: 2rem; }
  .foto { display: none; }
}
@media (max-width: 480px) {
  .credenciales { grid-template-columns: minmax(0, 1fr); }
  .precio strong { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }