/* ==========================================================================
   CREATICS · trabaja.css — lo propio de /trabaja-con-nosotros/ (prefijo .cs-tr-).
   Requiere los cinco comunes y actividades.css (héroe con foto, barra del móvil,
   preguntas, cierre). Solo lo que no existe: el «¿Encajas?», las tarjetas de oferta,
   el perfil por edades, lo de hoy y lo que se abre después, cómo ayudamos y la
   retribución, los dos ejemplos de sesión, otros perfiles y el proceso.
   ========================================================================== */

/* ---------- ¿Encajas? (fondo claro, va lo primero) ---------- */
.cs-tr-encajas[hidden]{display:none}
.cs-tr-encajas .cs-lead{max-width:60ch}
.cs-tr-test{display:flex;flex-direction:column;gap:24px;max-width:880px;padding:26px 28px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm)}
.cs-tr-test[hidden]{display:none}
.cs-tr-pregunta{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:12px}
.cs-tr-pregunta legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:0;margin-bottom:12px}
.cs-tr-pregunta__num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--cs-yellow);border:1.5px solid var(--cs-ink);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;color:var(--cs-ink);align-self:center}
.cs-tr-pregunta__t{font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);line-height:1.3;color:var(--cs-ink)}
.cs-tr-pregunta__nota{flex-basis:100%;padding-left:36px;font-size:var(--text-xs);color:var(--color-ink-mute)}
.cs-tr-opciones{display:flex;flex-wrap:wrap;gap:8px;padding-left:36px}
.cs-tr-opcion{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border-strong);background:var(--neutral-50);color:var(--cs-ink);font-size:var(--text-sm);font-weight:700;cursor:pointer;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.cs-tr-opcion:hover{border-color:var(--cs-ink)}
.cs-tr-opcion input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cs-tr-opcion:has(input:checked){background:var(--cs-yellow);border-color:var(--cs-ink);box-shadow:var(--shadow-offset)}
.cs-tr-opcion:has(input:focus-visible){outline:3px solid var(--cs-blue);outline-offset:2px}
.cs-tr-test__error{margin:0;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--cs-pink) 12%,transparent);border:1.5px solid var(--cs-pink);color:var(--cs-ink);font-size:var(--text-sm)}
.cs-tr-test__error[hidden]{display:none}
.cs-tr-resultado[hidden]{display:none}
.cs-tr-resultado{display:flex;flex-direction:column;gap:14px;max-width:880px;padding:26px 28px;border-radius:var(--radius-card);background:var(--cs-ink);color:var(--cs-white)}
.cs-tr-resultado .cs-h3{margin:0;color:var(--cs-white)}
.cs-tr-resultado__lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cs-tr-resultado__lista li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 14px;border-radius:12px;background:var(--cs-white);color:var(--cs-ink)}
.cs-tr-resultado__lista strong{font-family:var(--font-heading);font-size:var(--text-base)}
.cs-tr-resultado__lista small{font-size:var(--text-xs);color:var(--color-ink-mute)}
.cs-tr-resultado__lista a{font-size:var(--text-sm);font-weight:700;color:var(--cs-blue);text-decoration:underline;text-underline-offset:3px}
.cs-tr-resultado__lista .cs-tag{margin-left:auto}
.cs-tr-resultado__nota{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:color-mix(in srgb,var(--cs-white) 85%,transparent)}
.cs-tr-resultado__nota[hidden]{display:none}
.cs-tr-resultado__acciones{gap:10px 18px}
.cs-tr-resultado__otra{min-height:44px;padding:0;border:0;background:none;font:inherit;font-size:var(--text-sm);font-weight:700;color:var(--mint-300);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cs-tr-resultado__otra:hover{color:var(--cs-white)}

/* ---------- Las ofertas (cuatro, en dos columnas) ---------- */
.cs-tr-ofertas__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cs-tr-oferta{--_c:var(--cs-blue);display:flex;flex-direction:column;background:var(--color-surface);border:1.5px solid var(--color-border);border-top:5px solid var(--_c);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden}
.cs-tr-oferta--mint{--_c:var(--cs-mint)}
.cs-tr-oferta--yellow{--_c:var(--cs-yellow)}
.cs-tr-oferta--pink{--_c:var(--cs-pink)}
.cs-tr-oferta__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cs-tr-oferta__body{display:flex;flex-direction:column;gap:10px;padding:22px 24px 22px;flex:1}
.cs-tr-oferta__body .cs-h3{margin:0}
.cs-tr-oferta__etapa{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-tr-oferta__txt{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
/* El grupo, aparte y a la vista: es de lo que más vende (se disfruta dando clase) */
.cs-tr-oferta__grupo{margin:2px 0 0;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-left:4px solid var(--_c);border-radius:0 10px 10px 0;background:var(--neutral-50);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--cs-ink);font-weight:600}
.cs-tr-oferta__grupo span{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
/* El rótulo y los puntos van en tinta: el color de la actividad solo en la marca, que sobre
   blanco (menta, amarillo) no daba contraste para leer. */
.cs-tr-oferta__claves-t{margin:6px 0 0;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--cs-ink)}
.cs-tr-claves{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.cs-tr-claves li{position:relative;padding-left:20px;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--cs-ink)}
.cs-tr-claves li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:3px;background:var(--_c);border:1.5px solid var(--cs-ink)}
.cs-tr-oferta__pie{margin-top:auto;padding-top:14px}

/* ---------- El perfil: educador en todas; la técnica por edades, en puntos ---------- */
.cs-tr-tramos{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cs-tr-tramo{display:flex;flex-direction:column;gap:8px;padding:20px 20px 18px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:14px}
.cs-tr-tramo__t{margin:0;font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg);line-height:1.25;color:var(--cs-ink)}
.cs-tr-tramo__sub{margin:-4px 0 2px;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-tr-tramo__nivel{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:var(--text-sm)}
.cs-tr-tramo__et{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-tr-tramo__nivel b{color:var(--cs-ink)}
.cs-tr-puntos{display:inline-flex;gap:4px}
.cs-tr-puntos i{width:12px;height:12px;border-radius:50%;background:var(--neutral-50);border:1.5px solid var(--color-border-strong)}
.cs-tr-puntos i.is-on{background:var(--cs-pink);border-color:var(--cs-ink)}
.cs-tr-tramo__txt{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}

/* ---------- Lo que sí pedimos / lo que no hace falta ---------- */
.cs-tr-sino{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cs-tr-sino__col{display:flex;flex-direction:column;gap:12px;padding:22px 24px;border-radius:var(--radius-card);border:1.5px solid var(--color-border);background:var(--color-surface)}
.cs-tr-sino__col .cs-h4{margin:0}
.cs-tr-sino__col--si{border-left:5px solid var(--cs-turquoise)}
.cs-tr-sino__col--no{border-left:5px solid var(--color-border-strong);background:transparent}
.cs-tr-check{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.cs-tr-check li{position:relative;padding-left:30px;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--cs-ink)}
.cs-tr-check li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;background:var(--cs-turquoise);border:1.5px solid var(--cs-ink)}
.cs-tr-check li::after{content:"";position:absolute;left:6px;top:calc(.15em + 4px);width:6px;height:10px;border:solid var(--cs-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.cs-tr-check--no li{color:var(--color-ink-soft)}
.cs-tr-check--no li::before{background:var(--neutral-50);border-color:var(--color-border-strong)}
.cs-tr-check--no li::after{left:5px;top:calc(.15em + 9px);width:10px;height:0;border-width:0 0 2px 0;transform:none;border-color:var(--color-ink-mute)}

/* ---------- Lo de hoy y lo que se abre después (opciones, no un recorrido) ---------- */
.cs-tr-crecer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:22px;align-items:start}
.cs-tr-hoy{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:26px 28px;background:var(--color-surface);border:var(--border-bold) solid var(--cs-ink);border-radius:var(--radius-card);box-shadow:var(--shadow-offset)}
.cs-tr-hoy .cs-h3{margin:0}
.cs-tr-hoy p{margin:0;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--color-ink-soft)}
.cs-tr-luego{display:flex;flex-direction:column;gap:12px;padding:26px 28px;background:var(--neutral-50);border:1.5px solid var(--color-border);border-radius:var(--radius-card)}
.cs-tr-luego__t{margin:0;font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--color-ink-mute)}
.cs-tr-luego__lista{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cs-tr-luego__lista li{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:12px}
.cs-tr-luego__lista strong{font-family:var(--font-heading);font-size:var(--text-base);color:var(--cs-ink)}
.cs-tr-luego__lista span{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}

/* ---------- Cómo te ayudamos y la retribución ---------- */
.cs-tr-damos__grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cs-tr-dato{display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:14px}
.cs-tr-dato .cs-h4{margin:0}
.cs-tr-dato p{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-tr-pago{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:24px 28px;background:var(--cs-ink);color:var(--cs-white);border-radius:var(--radius-card)}
.cs-tr-pago .cs-h3{margin:0;color:var(--cs-white)}
.cs-tr-pago p{margin:0;max-width:70ch;font-size:var(--text-base);line-height:var(--leading-relaxed);color:color-mix(in srgb,var(--cs-white) 85%,transparent)}

/* ---------- Te lo llevas puesto ---------- */
.cs-tr-carrera__in{display:flex;flex-direction:column;gap:14px;max-width:820px}
.cs-tr-carrera__in .cs-h2{margin:0}
.cs-tr-carrera__p{margin:0;font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--cs-ink)}
.cs-tr-carrera__p:first-of-type{font-family:var(--font-heading);font-weight:700}

/* ---------- Dos ejemplos de sesión ---------- */
.cs-tr-sesiones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cs-tr-ejemplo{--_c:var(--cs-blue);display:flex;flex-direction:column;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden}
.cs-tr-ejemplo--mint{--_c:var(--cs-mint)}
.cs-tr-ejemplo__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.cs-tr-ejemplo__body{display:flex;flex-direction:column;gap:12px;padding:22px 24px 22px}
.cs-tr-ejemplo__body .cs-h3{margin:0}
.cs-tr-ejemplo__intro{margin:0;font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-tr-ejemplo__pasos{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cs-tr-ejemplo__pasos li{display:flex;gap:12px;align-items:flex-start}
.cs-tr-ejemplo__pasos li div{display:flex;flex-direction:column;gap:2px}
.cs-tr-ejemplo__pasos strong{font-family:var(--font-heading);font-size:var(--text-base);line-height:1.3;color:var(--cs-ink)}
.cs-tr-ejemplo__pasos span{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
/* El número lleva el color de la actividad de fondo: sobre azul, texto blanco; sobre menta o
   amarillo, tinta. Antes salía tinta sobre azul y no se leía (Alfon, 23/09/2026). */
.cs-tr-ejemplo__num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-top:2px;border-radius:50%;background:var(--_c);border:1.5px solid var(--cs-ink);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700}
/* Con la clase del padre delante para ganar a «.cs-tr-ejemplo__pasos span», que pinta gris */
.cs-tr-ejemplo__pasos .cs-tr-ejemplo__num{color:var(--cs-white)}
.cs-tr-ejemplo--mint .cs-tr-ejemplo__pasos .cs-tr-ejemplo__num,.cs-tr-ejemplo--yellow .cs-tr-ejemplo__pasos .cs-tr-ejemplo__num{color:var(--cs-ink)}
.cs-tr-ejemplo--yellow{--_c:var(--cs-yellow)}

/* ---------- Otros perfiles ---------- */
.cs-tr-otros__grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cs-tr-otro{display:flex;flex-direction:column;gap:6px;padding:18px 20px 16px;border:1.5px dashed var(--color-border-strong);border-radius:14px;scroll-margin-top:96px}
.cs-tr-otro .cs-h4{margin:0}
.cs-tr-otro p{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-tr-oferta{scroll-margin-top:96px}

/* ---------- Cómo va el proceso ---------- */
.cs-tr-proceso__lista{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cs-tr-proceso__lista li{display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:14px}
.cs-tr-proceso__lista .cs-h4{margin:0}
.cs-tr-proceso__lista p{margin:0;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-ink-soft)}
.cs-tr-proceso__num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--cs-turquoise);border:1.5px solid var(--cs-ink);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:700;color:var(--cs-ink)}

/* ---------- Cierre ---------- */
.cs-tr-cierre__in{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:720px}
.cs-tr-cierre__in .cs-h2{margin:0}
.cs-tr-cierre__acciones{gap:12px}
.cs-tr-cierre__quien{margin:0;font-size:var(--text-sm);color:color-mix(in srgb,var(--cs-white) 80%,transparent)}
.cs-tr-cierre__quien strong{color:var(--cs-white)}
.cs-tr-cierre__quien a{color:var(--cs-turquoise);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- Anchos medios ---------- */
@media (max-width:1100px){
	.cs-tr-damos__grid,.cs-tr-otros__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.cs-tr-proceso__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
	.cs-tr-tramos{grid-template-columns:repeat(2,minmax(0,1fr))}
	.cs-tr-sesiones{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
	.cs-tr-ofertas__grid{grid-template-columns:minmax(0,1fr)}
	.cs-tr-sesiones{grid-template-columns:minmax(0,1fr)}
	.cs-tr-sino{grid-template-columns:minmax(0,1fr)}
	.cs-tr-crecer__grid{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Móvil ---------- */
@media (max-width:720px){
	.cs-tr-test{padding:18px 16px;gap:20px}
	.cs-tr-pregunta__nota,.cs-tr-opciones{padding-left:0}
	.cs-tr-resultado{padding:18px 16px}
	.cs-tr-resultado__acciones{width:100%;flex-direction:column;align-items:stretch}
	.cs-tr-resultado__acciones .cs-btn{width:100%}
	.cs-tr-oferta__body{padding:18px}
	.cs-tr-hoy,.cs-tr-luego{padding:20px 18px}
	.cs-tr-luego__lista{grid-template-columns:minmax(0,1fr)}
	.cs-tr-tramos{grid-template-columns:minmax(0,1fr)}
	.cs-tr-damos__grid,.cs-tr-otros__grid,.cs-tr-proceso__lista{grid-template-columns:minmax(0,1fr)}
	.cs-tr-pago{padding:20px 18px}
	.cs-tr-carrera__p{font-size:var(--text-base)}
	.cs-tr-ejemplo__body{padding:18px}
	.cs-tr-cierre__acciones{width:100%;flex-direction:column;align-items:stretch}
	.cs-tr-cierre__acciones .cs-btn{width:100%}
}