/* ============================================================================
 * oficios.css · Escuela de Oficios IPEA (2026-10-07)
 * Público adulto (40, 50 años o más): legibilidad por encima de densidad.
 * Mínimos: texto 19–20 px · preguntas 28–32 px · devoluciones 21–23 px ·
 * botones 64 px con texto de 19–20 px · precio/duración/requisito/certificación
 * 22–28 px · aclaraciones legales nunca menores a 16 px · alto contraste.
 * Todo queda dentro de .of (no toca el resto del sitio).
 * ========================================================================== */
.of {
  --of-fondo: #05070b;
  --of-panel: #11141b;
  --of-panel-2: #171b24;
  --of-linea: #2c3240;
  --of-texto: #f7f8fb;
  --of-suave: #d3d9e3;
  --of-azul: #2f7cf6;
  --of-azul-2: #1f5fd6;
  --of-fucsia: #ff00a8;
  --of-fucsia-texto: #ff8fd8;
  --of-verde: #35d07f;
  --of-amarillo: #ffd43b;
  color: var(--of-texto);
  font-size: 20px;
  line-height: 1.55;
}
.of *, .of *::before, .of *::after { box-sizing: border-box; }
.of p { margin: 0 0 16px; }
.of b, .of strong { color: #fff; }
.of :where(a) { color: #9cc3ff; }
.of__ancho { width: min(760px, 100%); margin: 0 auto; padding: 0 18px; }
.of__ancho--ancho { width: min(1100px, 100%); }

/* --- Navegación del módulo (nunca encierra) -------------------------------- */
.of-nav { border-bottom: 1px solid #1c2029; background: #080a0f; }
.of-nav ul { display: flex; gap: 6px; overflow-x: auto; margin: 0; padding: 10px 18px; list-style: none; scrollbar-width: none; }
.of-nav ul::-webkit-scrollbar { display: none; }
.of-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; white-space: nowrap; color: #fff; text-decoration: none; font-size: 18px; font-weight: 800; border: 1px solid var(--of-linea); background: var(--of-panel); }
.of-nav a[aria-current="page"] { border-color: var(--of-fucsia); background: rgba(255, 0, 168, .14); }

/* --- Encabezados ------------------------------------------------------------- */
.of-hero { padding: 30px 0 34px; background: radial-gradient(circle at 92% 0%, rgba(255, 0, 168, .2), transparent 45%), linear-gradient(160deg, #0c1017, #05070b 62%, #14060f); border-bottom: 1px solid #1c2029; }
.of-entrada { display: inline-block; margin: 0 0 14px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 0, 168, .16); color: var(--of-fucsia-texto); font-size: 18px; font-weight: 900; letter-spacing: .03em; }
.of-entrada--avanzar { background: rgba(47, 124, 246, .18); color: #9cc3ff; }
.of-h1 { margin: 0 0 14px; font-size: clamp(34px, 8.8vw, 58px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; }
.of-lema { display: block; margin-top: 12px; color: var(--of-fucsia-texto); font-size: .56em; line-height: 1.2; }
.of-bajada { font-size: 21px; color: var(--of-suave); }
.of-h2 { margin: 0 0 16px; font-size: clamp(29px, 7vw, 40px); line-height: 1.15; font-weight: 900; letter-spacing: -.01em; }
.of-h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.25; font-weight: 900; }
.of-kicker { margin: 0 0 8px; color: var(--of-fucsia-texto); font-size: 18px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }

/* --- Bloques ------------------------------------------------------------------- */
.of-bloque { padding: 42px 0 36px; border-bottom: 1px solid #171b23; }
.of-bloque--tinte { background: linear-gradient(180deg, #0a0d13, #05070b); }
.of-tarjeta { padding: 22px 20px; border-radius: 20px; background: var(--of-panel); border: 2px solid var(--of-linea); }
.of-tarjeta + .of-tarjeta { margin-top: 16px; }
.of-objecion { margin: 0; padding: 22px 20px; border-radius: 20px; background: var(--of-panel); border-left: 6px solid var(--of-fucsia); }
.of-objecion__pregunta { display: block; margin-bottom: 8px; font-size: 24px; font-weight: 900; color: #fff; }
.of-objecion__respuesta { font-size: 21px; color: var(--of-suave); }
.of-lista { margin: 12px 0 18px; padding: 0; list-style: none; }
.of-lista li { position: relative; padding: 8px 0 8px 38px; font-size: 20px; }
.of-lista li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--of-verde); color: #05070b; font-size: 16px; font-weight: 900; }
.of-verbos { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; padding: 0; list-style: none; }
.of-verbos li { padding: 10px 16px; border-radius: 999px; background: var(--of-panel-2); border: 1px solid var(--of-linea); font-size: 19px; font-weight: 800; }

/* --- Datos comerciales críticos (22–28 px) ------------------------------------ */
.of-datos { display: grid; gap: 12px; margin: 20px 0; padding: 0; list-style: none; }
.of-dato { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--of-panel); border: 2px solid var(--of-linea); }
.of-dato__etiqueta { font-size: 18px; font-weight: 800; color: var(--of-suave); }
.of-dato__valor { font-size: 25px; font-weight: 900; color: #fff; line-height: 1.2; }
.of-dato__valor--pendiente { font-size: 22px; color: var(--of-amarillo); }
.of-dato--destacado { border-color: var(--of-fucsia); }

/* --- Botones (64 px) ------------------------------------------------------------ */
.of-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 64px; padding: 14px 22px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 20px; font-weight: 900; text-align: center; text-decoration: none; line-height: 1.2; }
.of-btn--principal { background: linear-gradient(180deg, var(--of-azul), var(--of-azul-2)); color: #fff; box-shadow: 0 10px 28px rgba(47, 124, 246, .3); }
.of-btn--secundario { background: transparent; color: #fff; border: 2px solid #4a5263; }
.of-btn--suave { background: var(--of-panel-2); color: #fff; border: 2px solid var(--of-linea); }
.of-btn--wa { background: #1fa855; color: #fff; }
.of-btn + .of-btn, .of-acciones > * + * { margin-top: 12px; }
.of-acciones { margin-top: 22px; }
.of-enlace { display: inline-flex; align-items: center; min-height: 48px; font-size: 19px; font-weight: 800; color: #9cc3ff; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; font-family: inherit; }
.of-btn:focus-visible, .of-enlace:focus-visible, .of-opcion:focus-visible, .of-faq summary:focus-visible, .of-nav a:focus-visible { outline: 3px solid var(--of-amarillo); outline-offset: 3px; }

/* --- Conversación (asesor) --------------------------------------------------- */
.of-anfitrion { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.of-anfitrion__avatar { flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--of-fucsia), var(--of-azul)); font-size: 22px; font-weight: 900; color: #fff; }
.of-anfitrion__texto { font-size: 18px; color: var(--of-suave); line-height: 1.35; }
.of-anfitrion__texto b { display: block; font-size: 19px; }
.of-progreso { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 18px; font-weight: 800; color: var(--of-suave); }
.of-progreso__puntos { display: flex; gap: 6px; }
.of-progreso__puntos span { width: 12px; height: 12px; border-radius: 50%; background: #3a4150; }
.of-progreso__puntos span.hecho { background: var(--of-verde); }
.of-pregunta { margin: 0 0 8px; font-size: clamp(28px, 7.4vw, 32px); line-height: 1.2; font-weight: 900; }
.of-ayuda { font-size: 19px; color: var(--of-suave); }
.of-opciones { display: grid; gap: 12px; margin: 18px 0 8px; padding: 0; list-style: none; }
.of-opcion { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px; border-radius: 16px; border: 2px solid var(--of-linea); background: var(--of-panel); color: #fff; font: inherit; font-size: 20px; font-weight: 700; text-align: left; cursor: pointer; }
.of-opcion__emoji { flex: 0 0 auto; font-size: 26px; }
.of-opcion.esta-elegida { border-color: var(--of-fucsia); background: linear-gradient(110deg, rgba(47, 124, 246, .16), rgba(255, 0, 168, .16)); }
.of-devolucion { margin: 18px 0 10px; padding: 22px 20px; border-radius: 20px; background: linear-gradient(140deg, rgba(53, 208, 127, .16), rgba(47, 124, 246, .12)); border: 2px solid var(--of-verde); font-size: 22px; line-height: 1.5; color: #fff; }
.of-devolucion__corregir { margin-top: 6px; }
.of-entendiendo { margin: 26px 0 0; padding: 18px 18px 8px; border-radius: 18px; background: var(--of-panel); border: 1px dashed #3a4150; }
.of-entendiendo__titulo { margin: 0 0 8px; font-size: 18px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--of-suave); }
.of-entendiendo ul { margin: 0; padding: 0; list-style: none; }
.of-entendiendo li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #222734; font-size: 19px; }
.of-entendiendo li:first-child { border-top: 0; }
.of-salidas { margin-top: 30px; padding-top: 18px; border-top: 1px solid #1c2029; display: grid; gap: 4px; }

/* --- Resultado ------------------------------------------------------------------ */
.of-frase-propia { margin: 0 0 10px; font-size: clamp(30px, 8vw, 42px); font-weight: 900; color: var(--of-fucsia-texto); line-height: 1.15; }
.of-recomendacion { padding: 24px 20px; border-radius: 22px; background: var(--of-panel); border: 3px solid var(--of-fucsia); }
.of-recomendacion__nombre { margin: 6px 0 10px; font-size: 30px; line-height: 1.15; font-weight: 900; }
.of-porque { margin: 14px 0; padding: 0; list-style: none; }
.of-porque li { padding: 10px 0; border-top: 1px solid #232838; font-size: 20px; }
.of-porque li:first-child { border-top: 0; }
.of-alternativa { display: block; margin-top: 14px; padding: 18px; border-radius: 18px; background: var(--of-panel); border: 2px solid var(--of-linea); color: #fff; text-decoration: none; }
.of-alternativa b { display: block; font-size: 22px; }
.of-alternativa span { font-size: 19px; color: var(--of-suave); }

/* --- Tarjetas de curso (catálogo / hub) ---------------------------------------- */
.of-cursos { display: grid; gap: 16px; margin-top: 20px; }
.of-curso { display: grid; gap: 10px; padding: 22px 20px; border-radius: 22px; background: var(--of-panel); border: 2px solid var(--of-linea); }
.of-curso--entrada { border-color: var(--of-fucsia); background: linear-gradient(160deg, rgba(255, 0, 168, .10), #11141b 55%); }
.of-curso__nombre { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 900; }
.of-curso__resultado { margin: 0; font-size: 20px; color: var(--of-suave); }
.of-curso__requisito { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 212, 59, .10); border: 1px solid rgba(255, 212, 59, .5); font-size: 19px; color: #fff; }
.of-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.of-chips li { padding: 7px 12px; border-radius: 10px; background: var(--of-panel-2); border: 1px solid var(--of-linea); font-size: 18px; font-weight: 800; }
.of-chips li.empezar { border-color: var(--of-verde); color: #b6f5d3; }
.of-chips li.avanzar { border-color: #6aa4ff; color: #cfe0ff; }

/* --- Escalera / identidad futura ------------------------------------------------ */
.of-escalera { margin: 20px 0; padding: 0; list-style: none; }
.of-escalera li { position: relative; padding: 0 0 22px 52px; }
.of-escalera li::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: 0; width: 3px; background: linear-gradient(var(--of-fucsia), var(--of-azul)); }
.of-escalera li:last-child::before { display: none; }
.of-escalera__punto { position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--of-panel-2); border: 3px solid var(--of-fucsia); }
.of-escalera li.actual .of-escalera__punto { background: var(--of-fucsia); }
.of-escalera__cuando { display: block; font-size: 18px; font-weight: 900; color: var(--of-fucsia-texto); letter-spacing: .04em; text-transform: uppercase; }
.of-escalera__que { display: block; font-size: 22px; font-weight: 900; color: #fff; }
.of-escalera__nota { display: block; font-size: 18px; color: var(--of-suave); }

/* --- Requisito ------------------------------------------------------------------ */
.of-requisito { padding: 24px 20px; border-radius: 22px; background: rgba(47, 124, 246, .10); border: 3px solid #6aa4ff; }
.of-requisito__titulo { margin: 0 0 10px; font-size: 26px; font-weight: 900; }
.of-requisito__texto { font-size: 22px; color: #fff; }
.of-aviso { margin: 16px 0; padding: 18px; border-radius: 16px; background: rgba(255, 212, 59, .10); border: 2px solid rgba(255, 212, 59, .55); font-size: 20px; color: #fff; }
.of-legal { font-size: 18px; color: #c9d0dc; line-height: 1.5; }

/* --- Tu camino ------------------------------------------------------------------- */
.of-camino { margin: 16px 0; border-radius: 18px; border: 2px solid var(--of-verde); background: #0b1612; }
.of-camino__abrir { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 12px 18px; background: none; border: 0; color: #fff; font: inherit; font-size: 20px; font-weight: 900; text-align: left; cursor: pointer; }
.of-camino__cuerpo { padding: 0 18px 18px; }
.of-camino dl { margin: 0; }
.of-camino dt { margin-top: 14px; font-size: 16px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: #9cf0c3; }
.of-camino dd { margin: 4px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 21px; font-weight: 800; color: #fff; }

/* --- Preguntas frecuentes --------------------------------------------------------- */
.of-faq { display: grid; gap: 10px; margin-top: 18px; }
.of-faq details { border-radius: 16px; background: var(--of-panel); border: 1px solid var(--of-linea); }
.of-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 64px; padding: 14px 18px; font-size: 20px; font-weight: 800; }
.of-faq summary::-webkit-details-marker { display: none; }
.of-faq summary::after { content: "+"; flex: 0 0 auto; font-size: 30px; line-height: 1; color: var(--of-fucsia-texto); }
.of-faq details[open] summary::after { content: "–"; }
.of-faq__respuesta { padding: 0 18px 18px; font-size: 20px; color: var(--of-suave); }

@media (min-width: 900px) {
  .of { font-size: 20px; }
  .of-cursos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .of-cursos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .of-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .of-btn--auto { width: auto; min-width: 360px; }
}
@media (prefers-reduced-motion: reduce) { .of * { scroll-behavior: auto !important; } }

/* La barra global de inscripción: letra más grande en estas páginas y fuera de la vista mientras hay un botón de inscripción visible. */
.pagina-oficios .conversion-bar__primary { font-size: 16px; white-space: nowrap; letter-spacing: 0; }
.pagina-oficios .conversion-bar__help { font-size: 15px; white-space: nowrap; }
.pagina-oficios .conversion-bar { transition: opacity .2s, transform .2s, visibility .2s; }
.pagina-oficios.of-cta-a-la-vista .conversion-bar { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 16px); }

/* --- Dirección visual · Escuela de Oficios -----------------------------------
 * Manos haciendo: cada curso se presenta con una ilustración de la práctica
 * (rotulada "Ilustración" hasta tener fotos reales). Todas las imágenes tienen
 * ancho/alto reservados: no hay saltos al cargar.
 * En celular, el primer pantallazo de un curso muestra: qué es, cuánto dura,
 * una imagen del oficio y el botón ME QUIERO INSCRIBIR.
 * -------------------------------------------------------------------------- */
.of-hero__grid { width: min(1180px, 100%); margin: 0 auto; padding: 0 18px; display: grid; gap: 16px; }
.of-hero__contenido, .of-hero__accion { min-width: 0; }
.of-hero--curso { padding: 22px 0 30px; }
.of-hero--curso .of-entrada { margin-bottom: 10px; }
.of-hero--curso .of-h1 { font-size: clamp(32px, 8.6vw, 54px); line-height: 1.08; margin: 0 0 10px; }
.of-hero--curso .of-bajada { font-size: 20px; line-height: 1.45; margin: 0 0 6px; color: #e8ecf3; }
.of-lema-linea { margin: 0; font-size: 18px; font-weight: 900; color: var(--of-fucsia-texto); line-height: 1.35; }
.of-hero__accion > .of-btn { margin-top: 0; }

.of-media { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: #0d1118; border: 1px solid var(--of-linea); }
.of-media img { display: block; width: 100%; height: auto; object-fit: cover; }
.of-media figcaption { padding: 10px 14px 12px; font-size: 16px; line-height: 1.4; color: var(--of-suave); background: #0c1017; }
.of-media__rotulo { position: absolute; left: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(5, 7, 11, .78); color: #dfe5ee; font-size: 16px; font-weight: 700; line-height: 1.4; }
.of-media--hero img { aspect-ratio: 16 / 9; object-position: 62% 50%; }
.of-media--tarjeta { margin: -4px -2px 4px; border-radius: 16px; border-color: #343b4b; }
.of-media--tarjeta img { aspect-ratio: 16 / 9; object-position: 62% 50%; }

/* Datos clave como píldoras: no empujan el botón fuera de la pantalla. */
.of-pildoras { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.of-pildoras li { padding: 6px 12px; border-radius: 12px; background: var(--of-panel-2); border: 1px solid var(--of-linea); font-size: 18px; font-weight: 800; color: #fff; line-height: 1.35; }

/* Hub: las tres puertas de entrada, visibles en el primer pantallazo (filas en celular). */
.of-puertas__titulo { margin: 20px 0 8px !important; font-size: 20px; font-weight: 900; color: #fff; }
.of-puertas { display: grid; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.of-puertas a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 6px 14px 6px 6px; border-radius: 16px; background: var(--of-panel); border: 2px solid var(--of-fucsia); color: #fff; text-decoration: none; }
.of-puertas .of-media { flex: 0 0 104px; border: 0; border-radius: 11px; }
.of-puertas img { aspect-ratio: 3 / 2; object-position: 62% 50%; }
.of-puertas__texto { display: grid; line-height: 1.25; }
.of-puertas__texto b { font-size: 20px; }
.of-puertas__texto span { font-size: 18px; color: var(--of-suave); }
.of-puertas a::after { content: "›"; margin-left: auto; font-size: 32px; line-height: 1; color: var(--of-fucsia-texto); }
.of-puertas a:focus-visible { outline: 3px solid var(--of-amarillo); outline-offset: 3px; }
@media (min-width: 760px) {
  .of-puertas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .of-puertas a { flex-direction: column; align-items: stretch; padding: 0 0 12px; overflow: hidden; }
  .of-puertas .of-media { flex: none; border-radius: 0; }
  .of-puertas__texto { padding: 0 14px; }
  .of-puertas a::after { display: none; }
}

/* Lo que vas a hacer con tus manos */
.of-acciones-visuales { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 10px; margin: 20px -18px 8px; padding: 0 18px 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.of-acciones-visuales li { scroll-snap-align: start; }
.of-accion-visual { overflow: hidden; border-radius: 16px; border: 1px solid var(--of-linea); background: var(--of-panel); }
.of-accion-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.of-accion-visual span { display: block; padding: 8px 8px 10px; font-size: 18px; line-height: 1.2; font-weight: 900; color: #fff; text-align: center; }

/* Quién está detrás: fotos reales de IPEA con su contexto. */
.of-institucional { display: grid; gap: 20px; }
.of-evidencia-institucional { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.of-media--institucional img { aspect-ratio: 1 / 1; }
.of-media--institucional figcaption { font-size: 16px; }
.of-institucional__texto { min-width: 0; }

/* Asesor: persona real (foto cuando esté cargada; mientras, su inicial). */
.of-anfitrion__avatar { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; border: 3px solid var(--of-fucsia); background: linear-gradient(135deg, #2a1030, #12213f); color: #fff; font-size: 28px; font-weight: 900; }

/* Red de Talentos: un horizonte, no una promesa. */
.of-red__pasos { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: 8px 0 18px; padding: 0; list-style: none; counter-reset: paso; }
.of-red__pasos li { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--of-panel-2); border: 1px solid var(--of-linea); font-size: 18px; font-weight: 800; line-height: 1.3; }
.of-red__pasos li:not(:last-child)::after { content: "→"; color: var(--of-fucsia-texto); margin-left: 4px; }
.of-red__pasos .of-red__meta { border-color: var(--of-verde); background: rgba(53, 208, 127, .12); }

@media (min-width: 760px) {
  .of-acciones-visuales { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0 8px; padding: 0; overflow: visible; }
  .of-institucional { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; }
}

@media (min-width: 900px) {
  .of-hero--curso, .of-hero--visual { padding: 44px 0 50px; }
  .of-hero--curso .of-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); grid-template-areas: "texto imagen" "accion imagen"; gap: 18px 44px; align-items: start; padding: 0 28px; }
  .of-hero--curso .of-hero__contenido { grid-area: texto; }
  .of-hero--curso .of-media--hero { grid-area: imagen; align-self: center; }
  .of-hero--curso .of-hero__accion { grid-area: accion; }
  .of-media--hero img { aspect-ratio: 3 / 2; }
}

/* ============================================================================
 * V11 (2026-10-08) · recepción, salida laboral, temporada, precio con promoción
 * Mismas reglas de legibilidad: textos ≥ 19 px, precio protagonista, sin cuentas
 * regresivas. El rótulo de imagen queda discreto pero legible.
 * ========================================================================== */
.of-media__rotulo { font-size: 14px; padding: 2px 9px; background: rgba(5, 7, 11, .72); }
.of-ancla { scroll-margin-top: 80px; height: 0; }
.of [id] { scroll-margin-top: 72px; }

/* Recepción */
.of-hero--recepcion { padding: 28px 0 22px; }
.of-hero--recepcion .of-h1 { font-size: clamp(34px, 9vw, 52px); }
.of-bloque--conversacion { padding-top: 26px; }
.of-volver { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; }
.of-volver .of-btn { width: auto; min-height: 56px; min-width: 0; padding: 10px 20px; }
.of-salidas--recepcion { display: grid; gap: 12px; }
.of-salidas--recepcion .of-btn + .of-btn { margin-top: 0; }
.of-lista-rapida { margin-top: 18px; padding: 18px 18px 6px; border-radius: 18px; background: var(--of-panel); border: 2px solid var(--of-linea); }
.of-lista-rapida ul { margin: 0 0 16px; padding: 0; list-style: none; }
.of-lista-rapida li a { display: flex; align-items: center; min-height: 52px; padding: 6px 0; border-bottom: 1px solid #1f2430; color: #fff; font-size: 20px; font-weight: 700; text-decoration: none; }
.of-lista-rapida li a::after { content: "→"; margin-left: auto; padding-left: 12px; color: var(--of-fucsia-texto); }

/* Saludo para tráfico de anuncios */
.of-saludo { padding: 20px 0 6px; }
.of-saludo .of__ancho > * { margin-left: 0; margin-right: 0; }
.of-saludo__titulo { margin: 0 0 6px; font-size: 26px; font-weight: 900; line-height: 1.25; color: #fff; }
.of-saludo__texto { color: var(--of-suave); }
.of-saludo__opciones { display: grid; gap: 12px; padding: 18px; border-radius: 20px; background: var(--of-panel); border: 2px solid var(--of-fucsia); }
.of-saludo__opciones .of-btn + .of-btn { margin-top: 0; }
.of-saludo__opciones .of-enlace { justify-self: center; font-size: 19px; }

/* Temporada / oportunidad */
.of-temporada { counter-reset: paso; display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.of-temporada li { counter-increment: paso; position: relative; padding: 16px 18px 16px 62px; border-radius: 16px; background: var(--of-panel); border: 2px solid var(--of-linea); font-size: 21px; font-weight: 800; color: #fff; }
.of-temporada li::before { content: counter(paso); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--of-amarillo); color: #05070b; font-weight: 900; font-size: 18px; }

/* Salida laboral: grande lo importante, chico el detalle */
.of-salida { display: grid; gap: 12px; margin: 6px 0 18px; padding: 0; list-style: none; }
.of-salida li { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: var(--of-panel); border-left: 6px solid var(--of-verde); }
.of-salida b { font-size: 24px; line-height: 1.25; }
.of-salida span { font-size: 19px; color: var(--of-suave); }
.of-salida__texto { font-size: 18px; color: var(--of-suave); }
.of-obra { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; margin: 16px -18px 10px; padding: 0 18px 6px; overflow-x: auto; scroll-snap-type: x mandatory; }
.of-obra .of-media { scroll-snap-align: start; }
.of-media--resultado { margin: 18px 0 6px; }
.of-media--resultado figcaption, .of-media figcaption { padding: 10px 14px; font-size: 17px; color: var(--of-suave); }

/* Precio con promoción */
.of-precio { margin: 4px 0 18px; padding: 22px 20px; border-radius: 22px; background: var(--of-panel); border: 2px solid var(--of-linea); }
.of-precio--promo { border-color: var(--of-amarillo); background: linear-gradient(180deg, rgba(255, 212, 59, .10), var(--of-panel) 60%); }
.of-precio p { margin: 0; }
.of-precio__etiqueta { display: inline-block; margin-bottom: 10px !important; padding: 6px 12px; border-radius: 999px; background: rgba(255, 212, 59, .16); color: var(--of-amarillo); font-size: 18px; font-weight: 900; }
.of-precio__lista { display: flex; gap: 10px; align-items: baseline; font-size: 20px; color: var(--of-suave); }
.of-precio__lista s { font-size: 24px; color: #aeb7c6; }
.of-precio__valor { font-size: clamp(44px, 12vw, 60px); font-weight: 900; line-height: 1.05; color: #fff; letter-spacing: -.02em; }
.of-precio__vigencia { margin-top: 12px !important; font-size: 19px; font-weight: 900; color: var(--of-amarillo); letter-spacing: .02em; }
.of-precio__reserva { margin-top: 10px !important; font-size: 18px; color: var(--of-suave); }
.of-pildora--promo { border-color: var(--of-amarillo) !important; color: #fff3bf !important; }
.of-curso__promo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 0; }
.of-curso__promo s { color: #aeb7c6; font-size: 18px; }
.of-curso__promo b { font-size: 24px; }
.of-curso__promo span { flex-basis: 100%; color: var(--of-amarillo); font-size: 17px; font-weight: 800; }

/* Catálogo por categorías */
.of-indice { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.of-indice a { display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--of-panel); border: 2px solid var(--of-linea); color: #fff; font-size: 19px; font-weight: 800; text-decoration: none; }
.of-curso--simple { align-content: start; }
.of-curso__emoji { margin: 0; font-size: 40px; line-height: 1; }

@media (min-width: 760px) {
  .of-obra { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 10px; padding: 0; overflow: visible; }
  .of-salidas--recepcion { grid-template-columns: 1fr 1fr; }
  .of-saludo__opciones { grid-template-columns: 1fr 1fr; }
  .of-saludo__opciones .of-enlace { grid-column: 1 / -1; }
  .of-temporada { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}